La :checkedpseudo-classe en CSS sélectionne les éléments lorsqu'ils sont dans l'état sélectionné. Il n'est associé qu'aux éléments input ( ) de type radio et checkbox. Le :checkedsélecteur de pseudo-classe correspond aux types d'entrée radio et case à cocher lorsqu'il est coché ou basculé sur un état activé. S'ils ne sont pas sélectionnés ou cochés, il n'y a pas de correspondance.
Ainsi, lorsqu'une case est cochée et que vous ciblez l'étiquette immédiatement après:
input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; ) Le texte de l'étiquette passera de l'italique gris à la police normale rouge.
CSS is Awesome CSS est génial
Ce qui précède est un exemple d'utilisation de la :checkedpseudo-classe pour rendre les formulaires plus accessibles. La :checkedpseudo-classe peut être utilisée avec des entrées masquées et leurs étiquettes visibles pour créer des widgets interactifs, tels que des galeries d'images.
Plus de ressources
- Le hack de case à cocher
- MDN Docs sur: coché
- La spécification W3C sur: vérifié
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Tout | 3.1+ | Tout | 9+ | 9+ | tout | tout |