Den :checkedpseudo-klasse i CSS vælger elementer, når de er i den valgte tilstand. Det er kun forbundet med input ( ) -elementer af typen radio og afkrydsningsfelt. Den :checkedpseudo-class selector matcher radio- og checkbox indgangstyper når kontrolleret eller slås til en tændt tilstand. Hvis de ikke er valgt eller markeret, er der ingen match.
Så når et afkrydsningsfelt er markeret, og du målretter mod etiketten umiddelbart efter det:
input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; ) Etiketteksten bliver fra grå kursiv til rød normal skrifttype.
CSS is Awesome CSS er fantastisk
Ovenstående er et eksempel på brug af :checkedpseudoklassen til at gøre formularer mere tilgængelige. Den :checkedpseudo-klasse kan bruges med skjulte indgange og deres synlige etiketter til at bygge interaktive widgets, såsom billede gallerier.
Flere ressourcer
- Afkrydsningsfeltets hack
- MDN Docs til: afkrydset
- W3C-specifikationen på: kontrolleret
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nogen | 3.1+ | Nogen | 9+ | 9+ | nogen | nogen |