JSFiddle - React, Tailwind, and code Playground

by joelrodgers

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<h3>Inverse Search Bah (Boston pronunciation)</h3>

<div class="navbar navbar-inverse">
    <div class="navbar-inner ">
        <div class="container">
                        <ul class="nav">
              <li class="active">
                <a href="#">Home</a>
              </li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
<form class="navbar-search">
    <div class="input-append">
        <input  class="search-query" placeholder="Search" type="text" class="span2"><span class="add-on"><i class="icon-search"> </i></span>
    </div>
</form>

        </div>
    </div>
</div>

<h3>Normal Search Bah</h3>

<div class="navbar">
    <div class="navbar-inner ">
        <div class="container">
                        <ul class="nav">
              <li class="active">
                <a href="#">Home</a>
              </li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
<form class="navbar-search">
    <div class="input-append">
        <input  class="search-query" placeholder="Search" type="text" class="span2"> <span class="add-on"> <i class="icon-search"></i> </span>
    </div>
</form>

        </div>
    </div>
</div>

CSS

.navbar-search .search-query {
    border-radius: 15px 0 0 15px;
    padding: 4px 14px;
    border-right-style: none;
}

.input-append .add-on:last-child {
    border-radius: 0 15px 15px 0;
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    border-left-style: none;
}

.navbar-inverse .input-append .add-on:last-child 
{
    -moz-transition: none 0s ease 0s;
    background-color: #515151;
    border-color: #111111;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.15);
}