40

The bootstrap examples for the navbar search form have just a text box.

I'd like to be able to add a search icon at the beginning, like Twitter does on their search box. How can I do this with bootstrap?

Here's what I've tried so far but it's failing: http://jsfiddle.net/C4ZY3/3/

jterrace
  • 64,866
  • 22
  • 157
  • 202

9 Answers9

56

Here's how to use the :before pseudo selector and glyphicons for Bootstrap 2.3.2 instead of a background image on the input.

enter image description here

Here's a couple of simple examples: http://jsfiddle.net/qdGZy/

<style type="text/css">
input.search-query {
    padding-left:26px;
}

form.form-search {
    position: relative;
}

form.form-search:before {
    content:'';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
    background-position: -48px 0;
    position: absolute;
    top:8px;
    left:8px;
    opacity: .5;
    z-index: 1000;
}
</style>

<form class="form-search form-inline">
     <input type="text" class="search-query" placeholder="Search..." />
</form>

Update For Bootstrap 3.0.0

enter image description here

Here's an updated fiddle for bootstrap 3.0: http://jsfiddle.net/66Ynx/

JeremyWeir
  • 24,118
  • 10
  • 92
  • 107
51

One of the way to do it is to add left padding to the field and add background image for the field.

See example: http://jsfiddle.net/hYAEQ/

It's not exact way twitter.com do it, they used absolute position element above search field because they have all images in the single sprite, and can't easily use them as backgrounds, but it should do.

I used inline image for a background to make it easier to post it to jsfiddle, but feel free to use normal links to images here.

EDIT: The way to do it using bootstrap sprite and additional container for icon http://jsfiddle.net/hYAEQ/2/

EDIT 2:

Fix for white bootstrap theme: http://jsfiddle.net/hYAEQ/273/

EDIT 3:

If you are using navbar-inverse (black navbar) you will want this minor tweak: http://jsfiddle.net/hYAEQ/410/

.navbar-search .search-query {
    padding-left: 29px !important;
}
Scott Buckland
  • 3
  • 1
Alexey Ivanov
  • 8,128
  • 2
  • 26
  • 27
  • Can this be modified to use the [bootstrap sprite](http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png)? – jterrace Mar 06 '12 at 14:42
  • Yes, for example like this: http://jsfiddle.net/hYAEQ/1/ . But you will need to add div element to the form. Also if you need icon to change color on focus, you will need to use javascript to remove class "icon-white" from "
    " then you select it and to put it back again on blur. (not in example)     – Alexey Ivanov Mar 06 '12 at 16:08
  • That's almost perfect! Any way to make the icon turn black when focused? I can see how to do it easily with JS, but not sure how to do it with pure CSS? – jterrace Mar 06 '12 at 16:59
  • Actually there is: http://jsfiddle.net/hYAEQ/2/ (first thought there is not). But there is a requirement — icon block must follow right after search field. And it will not change in IE7 (but Bootstap wouldn't change bg color here anyway) – Alexey Ivanov Mar 06 '12 at 17:17
  • This is awesome. Can you update the answer with that and I'll accept it? – jterrace Mar 06 '12 at 17:18
  • Added examples to the answer. – Alexey Ivanov Mar 06 '12 at 17:30
  • I've accepted your answer but can't assign the bounty for another 11 hours, will be incoming, thanks! – jterrace Mar 06 '12 at 17:52
  • Can a similar implementation be used for font icons like font-awesome? – Noz Jul 26 '12 at 23:13
  • You will need to make some adjustments. In classic bootstrap icons are inserted as background images, and in font-awesome they are inserted with :before pseudo-element. SO you will need to change background part to :before part. – Alexey Ivanov Jul 27 '12 at 07:06
  • @AlexeyIvanov since default navbar is now white, you can get rid of the last css class (or maybe comment it out so people can use it who still have black) but the jsfiddle looks a little strange now if you want to update it – jterrace Sep 25 '12 at 22:31
  • @AlexeyIvanov padding-left: 29px !important; what does it mean !important ?? – sharif2008 Jun 20 '13 at 10:50
  • 1
    @sharif It means that this css rule have maximum priority. There is a default css rules in Bootstrap css that also sets padding-left for this element and we need browser to use our rule, not the default. So we use !important for this reason. It is usually not the best practice to use !important in css, because it makes code harder to maintain. But in this case we have very small choice if we didn't want to mess with original css. – Alexey Ivanov Jun 20 '13 at 13:21
9

Play this fiddle, I put some rosin on the bow for you: http://jsfiddle.net/pYRbm/

.fornav {
    position:relative;
    margin-left:-22px;
    top:-3px;
    z-index:2;
}

<div class="navbar">
<div class="navbar-inner">
<div class="container">
<form class="navbar-search">
<div class="input-append">
<input type="text" class="search-query span2" placeholder="Search&hellip;"><span class="fornav"><i class="icon-search"></i></span>
</div>
</form>
</div>
</div>
</div>
UTCWebDev
  • 193
  • 2
  • 6
  • this is cleaner solution as you may use custom icons too; http://fortawesome.github.com/Font-Awesome/ note that `left:-22px` instead of `margin-left:-22px;` and wrapping input and span tags within a `` will let you use it in limited width area without dropping the icon on a new line.. +1 for the answer. – kirpit Nov 29 '12 at 12:05
4

You can also not touch the css at all by using prepending form inputs like so

<form class="navbar-search">
    <div class="input-prepend">
        <span class="add-on"><i class="icon-search"></i></span><input name="url" type="text" class="span2" placeholder="Page Url">
    </div>
</form>

Note that whitespace between </span> and <input> will create a gap between the icon and the text box.

Joseph Le Brech
  • 6,541
  • 11
  • 49
  • 84
4

In bootstrap 3.x.x

<div class="input-group">
  <input type="text" class="form-control" id="search">
  <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
</div>
Dario
  • 417
  • 4
  • 17
2

The new version 2.1.1 fixes the problem. It doesn't handle the case of the 15 pixel radius, so I went ahead and styled it accordingly. I also added navbar-inverse for fun.

A couple of caveats. The CSS can be better optimized, but recently I've been spoiled by less. Finally, there's an ever so slight, barely visible, left border to the left of the magnifying glass. I don't know exactly what's causing it, but it is likely the box shadow.

Please feel free to fork and improve.

http://jsfiddle.net/joelrodgers/hYAEQ/333/

ATL_DEV
  • 9,256
  • 11
  • 60
  • 102
1

For those using Rails, my solution is not the most beautiful but works.

<%= form_tag PATH_TO_MODEL, :method => 'get', :class => "navbar-search" do %>
    <%= text_field_tag :search, params[:search], :class => "search-query",
        :style => "padding-left:29px" %>
    <div class="icon-search" style="position:absolute;top:7px;left:11px;"></div>
<% end %>
Flavio Wuensche
  • 9,460
  • 1
  • 57
  • 54
1

Bit late to the party on this one ...

I used the following to achieve the search input as an icon

<div class="input-append">
  <input id="appendedInputButton" class="span6" type="text" placeholder="Search...">
  <button class="btn" type="button"><i class="icon-search"></i></button>
</div>
Dan
  • 10,171
  • 7
  • 38
  • 31
-1

You should change your approach. Use span.search-query as an overlay - here you have the most important things:

.navbar-search { position: relative } /* wrapper */
.search-query { position: absolute; left: 0; top: 0; z-index: 2; width: x } /* icon */
.span3 { position: relative; z-index: 1; padding-left: x } /* input */
rybitfa
  • 104
  • 3
  • 2
    The text is still over the icon with this, the search box is the wrong shape, and your selectors are too general, since you're overwriting main classes like span3 – jterrace Mar 04 '12 at 01:44