"Stylish Search Box"
Bootstrap 3.0.3 Snippet by dotstrap

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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"> <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; }

Related: See More


Questions / Comments:

I've used the same code and my button keeps displaying outside of the search input. Any suggestions?

Judd Eusebio (0) - 10 months ago - Reply 0


hi i have a problem i need help plz "D

<div class="container">

<h4>Search</h4>

<div class="row">

<div id="custom-search-input">

<div class="form-group col-lg-12 col-md-6">

<form action="index.php" method="get" class="search nocsrf row ">

<input type="hidden" name="page" value="search">

<input type="text" id="query" name="sPattern" class="form-control no-has-placeholder" placeholder="IPhone">

<input type="submit" class="btn btn-danger btn-search pull-right js-submit " value="Search">

</div>

</div>

</div>

</div>

the buton is not in serch box:(

ubyx (0) - 2 years ago - Reply 0


Also you missing form-control in <button class="btn btn-danger" type="button"> to view Search button

Harsh Nirbhavane (0) - 3 years ago - Reply 0


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.

Zocalo (0) - 4 years ago - Reply 0


I had to remove the attribute type="button" to make it work or change it to type="submit" and it works

James Bond (0) - 2 years ago - Reply 0


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

Guest (0) - 4 years ago - Reply 0


you got few spaces in input class and icon class :)

class=" search-query form-control"

class=" glyphicon glyphicon-search"

Miłosz Osiński (0) - 4 years ago - Reply 0