<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <h1>Expandable Search Form with CSS3</h1> <label class="h3">Demo On Click</label> <div> </div> <input type="text" class="search-focus" name="" placeholder="search here..."> <div> </div> <label class="h3">Demo On Hover</label> <div> </div> <input type="text" class="search-hover" name="" placeholder="search here..."> <div> </div> </div>

body{ background: radial-gradient(#80b1d6,#0e83cd) no-repeat; color: #fff; height: 100vh; } section{ padding: 5em; } ::-webkit-input-placeholder { color: #fff; } ::-moz-placeholder { color: #fff; } .search-focus { background: url(http://www.iconsdb.com/icons/preview/white/search-12-xxl.png) no-repeat left; border: 1px solid #ccc; outline: none; background-size: 22px; background-position: 13px; border-radius: 50px; width: 50px; height: 50px; padding: 25px; transition: all .5s; } .search-focus:focus{ width: 300px; padding-left: 50px; } .search-hover { background: url(http://www.iconsdb.com/icons/preview/white/search-12-xxl.png) no-repeat left; border: 1px solid #ccc; outline: none; background-size: 22px; background-position: 13px; border-radius: 50px; width: 50px; height: 50px; padding: 25px; transition: all .5s; } .search-hover:hover{ width: 300px; padding-left: 50px; } .search-click { position: relative; overflow: hidden; height: 50px; } .search-click input { background: transparent; border: 1px solid #ccc; outline: none; position: absolute; width: 300px; height: 50px; left: 0%; padding: 10px; }