<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="row"> <div class="col-md-offset-3 col-md-6 text-center"> <h2>Custom search fields v1.0</h2> <form class="searchbox-form" id="form-1"> <div class="input-group text-center"> <input type="text" class="form-control" placeholder="Search for..." required> <span class="input-group-btn"> <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div><!-- /input-group --> </form> <p>this custon search expand when used.</p> <p>no java or jquery, only CSS <small>(with CSS explained)</small></p> </div> </div> </div> nao terminado

body { padding-top: 50px } #form-1{ width:380px; } .searchbox-form * { -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out } .searchbox-form input.form-control { max-width:45%; min-width:100px; padding-right:0; border-right:0; box-shadow:0 0 0; border-color:#ccc; float:right; } .searchbox-form input.form-control:focus:valid, .searchbox-form input.form-control:valid, .searchbox-form input.form-control:focus { max-width:100%; } .searchbox-form button.btn { border-left:0; float:left; } .searchbox-form button.btn:hover, .searchbox-form button.btn:focus { background: transparent; border-color:#ccc; }