"Expanding Search Button in CSS"
Bootstrap 3.2.0 Snippet by NoelDavies

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>Expandable Search Form</h1> </div> </div> <div class="row"> <div class="col-md-4 col-md-offset-3"> <form action="" class="search-form"> <div class="form-group has-feedback"> <label for="search" class="sr-only">Search</label> <input type="text" class="form-control" name="search" id="search" placeholder="search"> <span class="glyphicon glyphicon-search form-control-feedback"></span> </div> </form> </div> </div> </div>
.search-form .form-group { float: right !important; transition: all 0.35s, border-radius 0s; width: 32px; height: 32px; background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; border-radius: 25px; border: 1px solid #ccc; } .search-form .form-group input.form-control { padding-right: 20px; border: 0 none; background: transparent; box-shadow: none; display:block; } .search-form .form-group input.form-control::-webkit-input-placeholder { display: none; } .search-form .form-group input.form-control:-moz-placeholder { /* Firefox 18- */ display: none; } .search-form .form-group input.form-control::-moz-placeholder { /* Firefox 19+ */ display: none; } .search-form .form-group input.form-control:-ms-input-placeholder { display: none; } .search-form .form-group:hover, .search-form .form-group.hover { width: 100%; border-radius: 4px 25px 25px 4px; } .search-form .form-group span.form-control-feedback { position: absolute; top: -1px; right: -2px; z-index: 2; display: block; width: 34px; height: 34px; line-height: 34px; text-align: center; color: #3596e0; left: initial; font-size: 14px; }

Related: See More


Questions / Comments:

didn't work in ie 11 (can't enter text)

Noel Buenasaga (0) - 1 year ago - Reply 0


This doesn't work for me.

J.V Krakowski (0) - 1 year ago - Reply 0


Make some changes to it. Didn't work for me either, but it looks great now.

Casper Pedersen (0) - 1 year ago - Reply 0


we have to set <input autocomplete="off">

Nikhil Pawar (0) - 2 years ago - Reply 0


It Get fails when we select old values in textbox

Nikhil Pawar (0) - 2 years ago - Reply 0


Thanx :)

sanaoop (0) - 2 years ago - Reply 0


is this applicable to font awesome icons too?

rocka0 (0) - 2 years ago - Reply 0


Can this be done for a button instead of search? Like click on the button to expand other hidden buttons. Use case would be a single button in table td.

Kev (0) - 3 years ago - Reply 0


i added this script & css so once the searchbar is clicked on it doesnt close. in other words you dont have to constantly hover over it to fill it out.

$(function() {
$( 'input').focusin(function() {

$('.has-feedback').addClass("showClass");

//console.log("this has focus");

});

$('input').focusout(function() {

$('.has-feedback').removeClass("showClass");

//console.log("search form no longer has focus");

});

});

and this css ...............

.search-form .form-group.showClass{

width: 100%;

border-radius: 4px 25px 25px 4px;

}

erwin rodriguez (0) - 3 years ago - Reply 0


$(function() {

erwin rodriguez (0) - 3 years ago - Reply 0


i added this script & css so once the searchbar is clicked on it doesnt close. in other words you dont have to constantly hover over it to fill it out.

$( 'input').focusin(function() {

$('.has-feedback').addClass("showClass");

//console.log("this has focus");

});

$('input').focusout(function() {

$('.has-feedback').removeClass("showClass");

//console.log("search form no longer has focus");

});

});

and this css ...............

.search-form .form-group.showClass{

width: 100%;

border-radius: 4px 25px 25px 4px;

}

erwin rodriguez (0) - 3 years ago - Reply 0


On menu collapse... WASTED!

(sic) (0) - 3 years ago - Reply 0


Interesting but it also doesn't work on touch devices

Ed (0) - 3 years ago - Reply 0


not working on IE

Kameel (0) - 3 years ago - Reply 0