<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 { margin:0; margin-top: 5px; padding: 0; } #custom-search-form .search-query { padding-right: 3px; padding-right: 4px \9; padding-left: 3px; padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: width 0.3s ease; -moz-transition:width 0.3s ease; -o-transition: width 0.3s ease; transition: width 0.3s ease; } #custom-search-form button { border: 0; background: none; /** belows styles are working good */ padding: 2px 5px; margin-top: 2px; position: relative; left: -28px; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .search-query:focus + button { z-index: 3; } .search-query:focus{ width: 260px; }