<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="col-md-12"> <form id="custom-search-form" class="form-search"> <div class="input-group col-md-3"> <input type="text" class="search-query" placeholder="Search" /> <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> </div> </form> </div> </div>

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

$('.search-query').focus(function() { $(this).animate({ width: '+=200' }, 'slow'); }).blur(function() { $(this).animate({ width: '-=200' }, 'slow'); });