Check out my code snippet below.
<style>
#searchformfix {
width: 50%;
border-right: 1px solid #E5E5E5;
border-left: 1px solid #E5E5E5;
position: relative;
background: #fff;
height: 40px;
display: inline-block;
border: 1px solid #219AEB;
border-radius: 5px;
margin-top: 5px;
}
#searchform {
margin: 0px 0 0;
padding: 0;
}
#searchform input[type="text"] {
background: #fff;
border: none;
float: left;
height: 100%;
transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-moz-transition: all 300ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-webkit-transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-o-transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
color: #929292;
margin-left: 10px;
margin-top: 10px;
width: 80%;
}
button.fa.fa-search {
background: #FFF;
margin-top: 5px;
font-size: 24px;
float: right;
cursor: pointer;
}
</style>
<div id='searchformfix'>
<form action='/search' id='searchform'>
<input name='q' onblur='if (this.value == "") {this.value = "Search Videos...";}' onfocus='if (this.value == "Search Videos...") {this.value = "";}' type='text' value='Search Videos...'/></form>
<button class='fa fa-search' type='submit' value='Go'></button>
</div>
View the JsFiddle demo here: http://jsfiddle.net/jaribhai/wncwqerj/4/
I have implemented a functional search bar that I want to make expandable in mobile devices similar to this example:
It seems like achieving this may require the use of jQuery. Can anyone provide guidance on how to make this functionality work? Thank you.