Le site WebDesignerWall nous montre comment faire en CSS3 un joli formulaire de recherche. Lorsque le navigateur ne supporte pas CSS3 on a un formulaire classique rectangulaire
Tout d’abord pour faire un cercle en CSS3 :
.circle {
width: 100px;
height: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
Et pour un ombrage dans la boite recherche supporté uniquement sur Chrome 4+ et Firefox 3.5+ :
.inset {
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}
Ce qui donne :