Ce tutoriel pour styler les champs input de vos formulaires de recherche vous permettra d’offrir à vos visiteurs un formulaire design au lieu du traditionnel — mais efficace — champ *input type=text* blanc avec contour.
L’auteur utilise un *button* à la place du *input type= »submit »* pour éviter les problèmes d’alignement afin d’utiliser une seule image pour le champ *input* et le *button*. Ce qui permet de gérer facilement les différents état *:focus* ou *:hover* avec *background-position*.
PS : En cas de problème avec l’utilisation de l’élément button, jettez un oeil sur ce fil de discussion paru sur le forum Alsacréations.
Bon voilà, je suis allé faire le père la morale avec un petit rappel sur l’inaccessibilité de cette solution. Cool.
Je n’en ai pas rajouté une couche sur les problèmes ergonomiques des formulaires trop stylés (on ne reconnait rien, le formulaire de recherche n’est pas directement identifiable en un dixième de seconde lorsqu’on arrive sur une page…), ça aurait fait beaucoup. 😀
@Florent V.: Oui, c’est clair que ce genre de manip est à prendre avec des pincettes, mais ça peut toujours servir.
C’est clair que styler les formulaires, ça prend du temps et c’est pas forcément rentable.