Expanding Search (WordPress search code used as example).
Gist includes HTML, CSS and JS.
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div>
<label for="Replace">Replace</label>
<i class="fa fa-search"> </i>
<input class="site-search" type="text" name="s" id="s" value="" tabindex="0" placeholder="Replace">
<input type="submit" id="searchsubmit" value="GO">
</div>
</form>
//jQuery expanding search bar
var box = $("#searchform");
// Code for closing if anywhere else is clicked
$(document).click(function() {
box.removeClass('expanded');
});
$("#searchform").click(function(e) {
e.stopPropagation();
// preventing parent click handler
box.addClass("expanded");
// Adding class to the box
});
box.click(function(e) {
e.stopPropagation();
// preventing parent click handler
});
/* ==[ Site Search Settings ]== */
/*-------------------------------------*/
form#searchform {
position: relative;
left: 0;
top: 5px;
}
/*-------------------------------------*/
#searchform i {
position: absolute;
top: 0;
left: 0;
font-size: 18px;
color: #fff;
cursor: pointer;
background: #6dcbdf;
width: 25px;
height: 25px;
text-indent: 3px;
}
/*-------------------------------------*/
#searchform label,
#searchform input[type=submit] {
display: none;
}
/*-------------------------------------*/
#searchform input[type=text] {
padding: 0;
margin: 0;
height: 25px;
width: 0;
border: none;
outline: none;
color: #092541;
font-size: 16px;
text-indent: 30px;
transition: all .4s ease;
}
#searchform input[type=text]:before {
content: '\f002';
font-family: FontAwesome;
color: #092541;
font-size: 20px;
}
#searchform input[type=text]:focus {
background-color: #fff;
width: 295px;
}
#searchform.expanded {
width: 295px;
opacity: 1;
font-weight: normal;
font-style: normal;
background-color: #fff;
}
#searchform.expanded input[type=text] {
width: 295px;
}