De :checkedpseudo-klasse in CSS selecteert elementen wanneer ze zich in de geselecteerde staat bevinden. Het wordt alleen geassocieerd met input ( ) elementen van het type radio en checkbox. De :checkedpseudoklasse-selector komt overeen met de invoertypes voor radio en checkbox wanneer deze is aangevinkt of ingeschakeld. Als ze niet zijn geselecteerd of aangevinkt, is er geen overeenkomst.
Dus als een selectievakje is aangevinkt en u het label direct erna target:
input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; ) De labeltekst verandert van grijs cursief in rood normaal lettertype.
CSS is Awesome CSS is geweldig
Het bovenstaande is een voorbeeld van het gebruik van de :checkedpseudo-klasse om formulieren toegankelijker te maken. De :checkedpseudo-klasse kan worden gebruikt met verborgen invoer en hun zichtbare labels om interactieve widgets te bouwen, zoals afbeeldingsgalerijen.
Meer middelen
- De checkbox hack
- MDN Docs aan: aangevinkt
- De W3C-specificatie op: gecontroleerd
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder | 3.1+ | Ieder | 9+ | 9+ | ieder | ieder |