Skip to content

Instantly share code, notes, and snippets.

  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save DevShahidul/ac5ee75f9874ce206868ae46fcf1d810 to your computer and use it in GitHub Desktop.
<style>
/* Search box style */
.search-wrap{position: absolute; right: 0; top: 15px; z-index: 1;}
.search-wrap.search-box-expanded{z-index: 3;}
.search-form-warp{float: left; width: 100%; position: relative;}
.expand-btn{position: absolute; right: 0; width: 35px; height: 35px; background: transparent; z-index: 5; cursor: pointer;}
.value-added .expand-btn{z-index: 2;}
.input-field{position: absolute; top: 0; right: 45px; width: 200px; height: 35px; z-index: 5; overflow: hidden;}
.search-wrap input[type="text"]{float: left; border: 1px solid #dfded8; color: #dfded8; padding: 0 10px; display: block; position: absolute; top: 0; right: -200px; width: 200px; height: 35px; margin: 0; padding: 0 10px; font-size: 18px; -webkit-backface-visibility: none; -moz-backface-visibility: none; -ms-backface-visibility: none; backface-visibility: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: right 0.3s; -moz-transition: right 0.3s; -ms-transition: right 0.3s; -o-transition: right 0.3s; transition: right 0.3s;}
.search-box-expanded.search-wrap input[type="text"]{right: 0px; -webkit-transition: right 0.3s; -moz-transition: right 0.3s; -ms-transition: right 0.3s; -o-transition: right 0.3s; transition: right 0.3s;}
.search-wrap input[type="submit"]{float: left; width: 35px; height: 35px; background: url(../images/search-icon.png) no-repeat center center; border: none; text-indent: -99990px; cursor: pointer; position: relative; z-index: 4;}
</style>
<!-- html structure for search box -->
<div class="search-wrap">
<form action="" method="post" class="search-form-warp">
<div class="input-field">
<input type="text" value="Search..." id="searchBox">
</div>
<input type="submit" id="submitBtn">
<div class="expand-btn" id="expand-btn"></div>
</form>
</div>
<script type="text/javascript">
$('#expand-btn').click(function(){
$('div.search-wrap').toggleClass('search-box-expanded')
})
// Begin input common focus and blur for value.
$('#searchBox').keyup(function(){
$('div.search-wrap').addClass('value-added')
})
$('#searchBox').blur(function(){
if(!this.value){this.value=this.defaultValue;}
if(this.value==this.defaultValue){
$('div.search-wrap').removeClass('value-added')
}
});
// Ends input common focus and blur for value.
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment