"Stylish input ( Using Icon Font ) "
Bootstrap 3.3.0 Snippet by Nagisachan

<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> <html> <title>W3.CSS Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <body> <!-- !PAGE CONTENT! --> <div class="w3-content" style="max-width:1500px"> <!-- Header --> <header class="w3-panel w3-padding-64 w3-center w3-opacity"> <h1>Tagvisor</h1> </header> <div class="container"> <div class="row"> <div class="col-md-6"> <div id="custom-search-input"> <div class="input-group col-md-12"> <input type="text" class="form-control input-lg" placeholder="Search" /> <span class="input-group-btn"> <button class="btn btn-info btn-lg" type="button"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div> </div> </div> </div> </div> <div class="menu"> <div class="w3-btn-bar w3-border w3-show-inline-block"> <a href="#" class="w3-btn">Log In</a> <a href="#" class="w3-btn">Upload</a> </div> </div> <!-- Footer <footer class="w3-container w3-padding-64 w3-light-grey w3-center"> <a href="#" class="w3-hover-text-indigo"><i class="fa fa-facebook-official"></i></a> <a href="#" class="w3-hover-text-red"><i class="fa fa-pinterest-p"></i></a> <a href="#" class="w3-hover-text-light-blue"><i class="fa fa-twitter"></i></a> <a href="#" class="w3-hover-text-grey"><i class="fa fa-flickr"></i></a> <a href="#" class="w3-hover-text-indigo"><i class="fa fa-linkedin"></i></a> <p>Powered by <a href="http://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</a></p> </footer>--> </div> </body> </html>
body,h1 {font-family: "Raleway", Arial, sans-serif} h1 {letter-spacing:7px} .menu {position: absolute;top: 25px;right: 25px;} #custom-search-input{ padding: 3px; border: solid 1px #E4E4E4; border-radius: 6px; background-color: #fff; position: absolute; top: 50%; left: 50%; right: -60%; } #custom-search-input input{ border: 0; box-shadow: none; } #custom-search-input button{ margin: 2px 0 0 0; background: none; box-shadow: none; border: 0; color: #666666; padding: 0 8px 0 10px; border-left: solid 1px #ccc; } #custom-search-input button:hover{ border: 0; box-shadow: none; border-left: solid 1px #ccc; } #custom-search-input .glyphicon-search{ font-size: 23px; }

Related: See More


Questions / Comments: