how to create a search bar like google in html
<!DOCTYPE html> <html> <head> <style> .searchbar{ margin-top:25px; margin-left:283px; width:100%; } .bar{ border-radius:0; -webkit-box-shadow: 2px 3px 0px -2px #ccc; padding:10px; border:0px; outline: none; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #CCC; } .bar:hover{ -webkit-box-shadow: 3px 6px 7px -3px #ccc; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12 col-xs-12"> <div class="searchbar"> <div class="form-group "> <input type="text" class="bar" style="width:588px; height:44px; outline:none;" class="form-control" > <a href="#"><i style="margin-left:559px; top:-30px; "class="glyphicon glyphicon-search"></i></a> </div> </div> </div> </div> </div> </body> </html>