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

<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; }

Similar snippets: See More


Comments:

Kameel 2014-11-12 14:06:30
    not working on IE
Ed 2015-01-05 03:54:06
    Interesting but it also doesn't work on touch devices
(sic) 2015-03-09 06:39:34
    On menu collapse... WASTED!
erwin rodriguez 2015-03-18 22:55:39
    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.
erwin rodriguez 2015-03-18 22:56:03
    $(function() {
erwin rodriguez 2015-03-18 22:56:57
    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.
Kev 2015-04-19 20:31:15
    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.
rocka0 2016-01-01 06:14:51
    is this applicable to font awesome icons too?
sanaoop 2016-01-25 09:38:35
    Thanx :)
Nikhil Pawar 2016-04-15 06:08:58
    It Get fails when we select old values in textbox
Nikhil Pawar 2016-04-15 06:13:43
    we have to set <input autocomplete="off">
J.V Krakowski 2016-09-09 00:56:31
    This doesn't work for me.
Casper Pedersen 2016-10-04 08:24:06
    Make some changes to it. Didn't work for me either, but it looks great now.
Noel Buenasaga 2017-04-05 04:01:03
    didn't work in ie 11 (can't enter text)

Commenting will be back soon.