<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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>Expandable when is Focus</h2> <h3>Mac Search Style</h3> <div class="span12"> <form id="custom-search-form" class="form-search form-horizontal pull-right"> <div class="input-append span12"> <input type="text" class="search-query mac-style" placeholder="Search"> <button type="submit" class="btn"><i class="icon-search"></i></button> </div> </form> </div> </div> </div>

#custom-search-form .search-query { -webkit-transition: width 0.2s ease-in-out; -moz-transition:width 0.2s ease-in-out; -o-transition: width 0.2s ease-in-out; transition: width 0.2s ease-in-out; }