La :checkedpseudo-classe in CSS seleziona gli elementi quando sono nello stato selezionato. È associato solo agli elementi input ( ) di tipo radio e casella di controllo. Il :checkedselettore di pseudo-classe abbina i tipi di input radio e casella di controllo quando selezionato o commutato su uno stato on. Se non sono selezionati o spuntati, non c'è corrispondenza.
Quindi, quando una casella di controllo è selezionata e stai targetizzando l'etichetta immediatamente dopo di essa:
input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; ) Il testo dell'etichetta passerà dal carattere grigio corsivo al rosso normale.
CSS is Awesome CSS è fantastico
Quanto sopra è un esempio dell'utilizzo della :checkedpseudo-classe per rendere i form più accessibili. La :checkedpseudo-classe può essere utilizzata con input nascosti e le loro etichette visibili per creare widget interattivi, come le gallerie di immagini.
Più risorse
- L'hack della casella di controllo
- Documenti MDN su: selezionato
- Le specifiche W3C su: verificato
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Qualunque | 3.1+ | Qualunque | 9+ | 9+ | qualunque | qualunque |