my way to preload images! haha
Update Coming Soon! Check out Skem9's future roadmap
Search for in

Twitter Bootstrap .^. Website Tutorials | Submited Nov 26, 2012

Written by: Yohn

Heres an easy way to display a clickable search icon within twitter bootstraps navbar search field instead of having to use a button and still have the rounded corners for the search field
In a project I was working on, I wanted to put twitter's navbar-search form within the navbar, and I wanted to use an icon within the search box to act like the button. I also wanted to use the rounded corners that the search-query input class has instead of the blocky like search form with the actual button to click. So heres what I came up with to put the search icon in the beginning of the input box that the user can click to submit the form however you'd like.

Heres what it looks like

User Picture..


<div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">Title</a> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> </ul> </li> </ul> <form class="navbar-search pull-right"> <div> <em class="icon-search"></em> <input type="text" class="search-query span2" placeholder="Search"> </div> </form> </div> </div>

CSS Code for Left Side Icon

.navbar-search div {position:relative;} .navbar-inner .navbar-search .search-query:focus, .navbar-inner .navbar-search .search-query.focused, .navbar-inner .navbar-search .search-query {padding-left: 28px;} .navbar-search em.icon-search { position: absolute; left: 10px; top: 7px; cursor:pointer; }

CSS Code for Right Side Icon

.navbar-search div {position:relative;} .navbar-inner .navbar-search .search-query:focus, .navbar-inner .navbar-search .search-query.focused, .navbar-inner .navbar-search .search-query {padding-right: 28px;} .navbar-search em.icon-search { position: absolute; right: 10px; top: 7px; cursor:pointer; }


$('.navbar-search .icon-search').click(function(){ alert('do whatever with '+$('.search-query').val()) })

myrtletran ~ 01/31/18, 9:41am
not bad)