"Stylish Search Box"
Bootstrap 3.0.3 Snippet by dotstrap

<div class="container"> <div class="row"> <h2>Stylish Search Box</h2> <div id="custom-search-input"> <div class="input-group col-md-12"> <input type="text" class=" search-query form-control" placeholder="Search" /> <span class="input-group-btn"> <button class="btn btn-danger" type="button"> <span class=" glyphicon glyphicon-search"></span> </button> </span> </div> </div> </div> </div>
#custom-search-input { margin:0; margin-top: 10px; padding: 0; } #custom-search-input .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-input 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; color:#D9230F; } .search-query:focus + button { z-index: 3; }

Similar snippets: See More


Comments:

Miłosz Osiński 2014-01-10 10:28:33
    you got few spaces in input class and icon class :)
Guest 2014-02-28 10:19:52
    <form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4">

</div>
</form>
Zocalo 2014-03-11 00:49:40
    I wasn't able to use this without giving the button a z-index above the input. Not sure how you're achieving it without. The z-index for focus on the input doesn't work for me either. I've fixed this but not without overhauling the CSS.
James Bond 2016-04-20 13:53:46
    I had to remove the attribute type="button" to make it work or change it to type="submit" and it works
Harsh Nirbhavane 2014-11-11 09:42:03
    Also you missing form-control in <button class="btn btn-danger" type="button"> to view Search button
ubyx 2015-05-02 21:02:28
    hi i have a problem i need help plz "D
Judd Eusebio 2017-05-23 15:40:59
    I've used the same code and my button keeps displaying outside of the search input. Any suggestions?

Commenting will be back soon.