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>