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

HTML Code


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


Code:
.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


Code:
.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; }


jQuery


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


No Comments Found