Den :checked
pseudo klass i CSS väljer element när de är i det valda tillståndet. Den är endast associerad med inmatningselement ( ) av typen radio och kryssruta. Den
:checked
pseudo-klass väljare matchar radio- och kryssrutan ingångstyper vid kontroll eller växlas till ett tillslaget tillstånd. Om de inte är markerade eller markerade finns det ingen matchning.
Så när en kryssruta är markerad och du riktar in dig på etiketten direkt efter den:
input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; )
Etiketttexten blir från grå kursiv till röd normal typsnitt.
CSS is Awesome
CSS är fantastiskt
Ovanstående är ett exempel på att använda :checked
pseudoklassen för att göra formulär mer tillgängliga. Den :checked
pseudo-klassen kan användas med dolda ingångar och deras synliga etiketter för att bygga interaktiva widgets, såsom bildgallerier.
Fler resurser
- Kryssrutan hacka
- MDN Docs på: markerat
- W3C-specifikationen på: markerad
Webbläsarstöd
Krom | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Några | 3.1+ | Några | 9+ | 9+ | några | några |