Den :checkedpseudo-klasse i CSS velger elementer når de er i den valgte tilstand. Det er bare knyttet til input ( ) -elementer av typen radio og avkrysningsrute. Den :checkedpseudo-class selector kamper radio og avkrysningsinngangstyper når sjekket eller slås til en på tilstand. Hvis de ikke er valgt eller krysset av, er det ingen samsvar.
Så når en avkrysningsrute er merket av, og du målretter mot etiketten umiddelbart etter den:
input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; ) Merketeksten blir fra grå kursiv til normal normal skrift.
CSS is Awesome CSS er kjempebra
Ovennevnte er et eksempel på bruk av :checkedpseudoklassen for å gjøre skjemaer mer tilgjengelige. Den :checkedpseudo-klassen kan brukes sammen med skjulte innganger og deres synlige etikettene til å bygge interaktive moduler, for eksempel bilde gallerier.
Flere ressurser
- Avkrysningsruten hack
- MDN Docs på: sjekket
- W3C-spesifikasjonen på: sjekket
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Noen | 3.1+ | Noen | 9+ | 9+ | noen | noen |