"Stylish Search form"
Bootstrap 2.3.2 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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="span12"> <form id="custom-search-form" class="form-search form-horizontal pull-right"> <div class="input-append span12"> <input type="text" class="search-query" placeholder="Search"> <button type="submit" class="btn"><i class="icon-search"></i></button> </div> </form> </div> </div> </div>
#custom-search-form { margin:0; margin-top: 5px; padding: 0; } #custom-search-form .search-query { padding-right: 3px; padding-right: 4px \9; padding-left: 3px; padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #custom-search-form button { border: 0; background: none; /** belows styles are working good */ padding: 2px 5px; margin-top: 2px; position: relative; left: -28px; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .search-query:focus + button { z-index: 3; }

Related: See More


Questions / Comments:

I can't figure out how to get this to float all the way to the right of the page? I've tried everything (that I know) but it stops about halfway. Thanks.

TD (0) - 4 years ago - Reply 0


1st learn basic html and css coding before using bootsrap.

Guest (0) - 4 years ago - Reply 0


how to make it smaller? xd

b (0) - 4 years ago - Reply 0


did not see anything special.

JK (0) - 4 years ago - Reply 0


Where is css path of fucking class=icon-search???

a (0) - 4 years ago - Reply 0


1st learn basic html and css coding before using bootsrap..

thushara (0) - 4 years ago - Reply 0


that's a fucking standard Bootstrap icon CSS. Same as these : http://twitter.github.io/bo...

maxsurguy (0) - 4 years ago - Reply 0


and how to use it? #custom-search-form button {background: url(../pix/search.png); background-size:cover;}? Or how any? I need only one icon, not sprite with billion images in one.

a (0) - 4 years ago - Reply 0


Retart...!

ThinkRight (0) - 4 years ago - Reply 0


He must be a retard. Have you ever used Bootstrap before?

Harish (0) - 4 years ago - Reply 0


William Kennedy (0) - 4 years ago - Reply 0