#6188 - Note : CSS astuce pout les champs de recherche
http://lehollandaisvolant.net/?mode=links&id=20130530205926
Dans Blogo, j’utilise un champ de recherche qui s’agrandit au hover. Pratique.
Si je veux le laisser grand également quand il y a quelque chose dedans, j’utilise ce CSS :
#q:hover, #q:focus, #q:not([value=""]) {width: 200px;}
#q {width: 50px;}
La largeur sera de 50px normalement.
La largeur sera de 200px au hover, au focus et si le « value » n’est pas vide.
D’autre sélecteurs sont là : http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html
Si je veux le laisser grand également quand il y a quelque chose dedans, j’utilise ce CSS :
#q:hover, #q:focus, #q:not([value=""]) {width: 200px;}
#q {width: 50px;}
La largeur sera de 50px normalement.
La largeur sera de 200px au hover, au focus et si le « value » n’est pas vide.
D’autre sélecteurs sont là : http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html