:checkedPseudo-clasa de elemente CSS selectează atunci când acestea sunt în stare selectată. Este asociat doar cu elementele input ( ) ale tipului radio și casetei de selectare. :checkedSelectorul pseudo-clasă se potrivește radio și checkbox tipuri de intrare atunci când verificate sau comutată la o privire de stat. Dacă nu sunt selectate sau bifate, nu există nicio potrivire.
Deci, atunci când este bifată o casetă de selectare și vizați eticheta imediat după aceasta:
input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; ) Textul etichetei se va transforma din font italic gri în roșu în font normal.
CSS is Awesome CSS este minunat
Cele de mai sus sunt un exemplu de utilizare a :checkedpseudo-clasei pentru a face formularele mai accesibile. :checkedPseudo-clasă pot fi utilizate cu intrări ascunse și etichetele lor vizibile pentru a construi widget - uri interactive, cum ar fi galerii de imagini.
Mai multe resurse
- Bifați caseta de selectare
- Documente MDN activat: verificat
- Specificația W3C de pe: verificată
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Orice | 3.1+ | Orice | 9+ | 9+ | orice | orice |