caja de busqueda search box en html5 css3

como crear una caja de busqueda personalisada en html5

Ejemplo de codigo
<style>
#buscar{
background: gray; padding: 5px; width:250px; height: 35px; border-radius: 5px;
}
input[type=submit]{height: 25px; background:rgb(220,220,220);box-shadow:inset 0px 2px 1px rgba(5,5,5,0.9), inset 0px -2px 1px rgba(255,255,255,0.9); border-radius:10px; size: 250px; padding-left: 6px; border: solid 1px gray }
input[type=submit]:hover{background:rgb(220,220,255); border-radius:10px; size: 250px; padding-left: 6px; border: solid 1px gray }
input[type=search]{ height: 25px; background:rgb(255,255,255);box-shadow:inset 0px 2px 1px rgba(5,5,5,0.9), inset 0px -2px 1px rgba(255,255,255,0.9); border-radius:10px; size: 250px; padding-left: 6px; border: solid 1px gray }
input[type=search]:hover{background:rgb(220,220,255); border-radius:10px; size: 250px; padding-left: 6px; border: solid 1px gray }
</style>

<div id=buscar>
<form  action=search.php>
<input id="busqueda" type="search" placeholder="Buscar..." />
<input type=submit value=buscar />
</form>
<div>