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.
Articles sur le même sujet
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)
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. :D
@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.