Die :checkedPseudoklasse in CSS wählt Elemente aus, wenn sie sich im ausgewählten Zustand befinden. Es ist nur input ( ) -Elementen vom Typ radio und checkbox zugeordnet. Der :checkedPseudoklassen-Selektor stimmt mit den Eingabetypen Radio und Checkbox überein, wenn er aktiviert oder in einen Ein-Zustand versetzt wird. Wenn sie nicht ausgewählt oder aktiviert sind, gibt es keine Übereinstimmung.
Wenn also ein Kontrollkästchen aktiviert ist und Sie unmittelbar danach auf das Etikett zielen:
input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; ) Der Beschriftungstext wechselt von grau kursiv zu rot normal.
CSS is Awesome CSS ist großartig
Das Obige ist ein Beispiel für die Verwendung der :checkedPseudoklasse, um Formulare zugänglicher zu machen. Die :checkedPseudoklasse kann mit versteckten Eingaben und ihren sichtbaren Beschriftungen verwendet werden, um interaktive Widgets wie Bildergalerien zu erstellen.
Mehr Ressourcen
- Der Checkbox-Hack
- MDN Docs on: aktiviert
- Die W3C-Spezifikation ist aktiviert
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Irgendein | 3.1+ | Irgendein | 9+ | 9+ | irgendein | irgendein |