: kontrollerad - CSS-tricks

Anonim

Den :checkedpseudo 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 :checkedpseudo-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 :checkedpseudoklassen för att göra formulär mer tillgängliga. Den :checkedpseudo-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