<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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <h2>Expandable when is Focus</h2> <h3>Mac Search Style</h3> <div class="span12"> <form class="form-search form-horizontal big-search-form"> <div class="text-left input-group"> <input type="text" class="form-control search-query mac-style" placeholder="Search"> <span class="input-group-addon"><button class="btn btn-secondary" type="button"><i class="fa fa-2x fa-search"></i></button></span> </div> </form> </div> </div> </div>

.big-search-form { margin:0; margin-top: 5px; padding: 0; width:300px; } .big-search-form .form-control { padding-right: 5px; padding-right: 5px \9; padding-left: 5px; padding-left: 5px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ height:50px; font-size:40px; margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -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; border-right:0px; } .big-search-form .btn { padding:0px; background:none; } .big-search-form .input-group-addon { background-color: #ffffff; } .big-search-form .search-query:focus + button { z-index: 3; } .big-search-form:hover { width:100%; }