"v4 - Searchbox"
Bootstrap 3.3.0 Snippet by explotter

<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 ----------> <!DOCTYPE html> <form> <input type="text" name="search" placeholder="Search here"> </form> </body> </html>
input[type=text] { width: 13px; box-sizing: border-box; border:0; outline: none; font-size: 16px; background-color: white; background-image: url('https://www.w3schools.com/howto/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; float:right; } input[type=text]:focus { width: 300px; border-top: 0; border-right:0; border-left:0; border-bottom: 1px solid #ddd; }

Related: See More


Questions / Comments: