Mise en forme champ de recherche avec boutton "OK"

Bonjour,

j'aimerai mettre en forme mon champ de recherche avec par exemple :
- Une bordure noire de 1px pour le champ et pour le bouton
- Arrière plan blanc pour le champ et gris pour le boutton
- Le bouton OK à droite de ce champ
- Même hauteur pour le bouton et le champ
- Boutton carré (j'ai mis "Ok" dedans)

le truc assez classique finalement :



Sous Firefox, j'ai un résultat cohérent. Sous IE7, j'ai essayé de multiples solutions : soit le bouton n'est pas aligné, soit il est plus haut que le champ de recherche, soit il n'est pas aligné avec le champ de recherche... bref... ça va jamais.

Auriez vous une source ?
Modifié par Newzic (24 Jun 2008 - 15:37)

Bonjour,

Il se peut que le padding ne passe pas bien sur l'input de type "submit" avec Internet Explorer. C'est à vérifier.
Pour l'alignement, le mieux que l'on puisse faire est généralement d'utiliser input {vertical-align: middle;}, sauf à vouloir corriger au pixel près pour chaque navigateur.

Si tu n'arrives pas à styler correctement l'input de type submit, tu peux essayer un élément BUTTON (de type "submit" également) à la place. Ou, au pire, passer par une image (INPUT de type "image", avec attribut alt qui va bien).