:checkedPseudo-klasa w elementach CSS wybiera, gdy są one w stanie wybranym. Jest powiązany tylko z elementami input ( ) typu radio i checkbox. :checkedSelektor pseudo-klasa pasuje typy wejściowych radio i checkbox po sprawdzeniu lub przełączać się stanie włączonym. Jeśli nie są zaznaczone lub zaznaczone, nie ma dopasowania.
Jeśli więc pole wyboru jest zaznaczone i kierujesz na etykietę znajdującą się bezpośrednio po nim:
input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; ) Tekst etykiety zmieni się z szarej kursywy na czerwoną zwykłą czcionkę.
CSS is Awesome CSS jest niesamowity
Powyższy przykład jest przykładem użycia :checkedpseudoklasy w celu zwiększenia dostępności formularzy. :checkedPseudo-klasa może być używana z ukrytymi wejściami i ich widocznych etykiet budować interaktywne widżety, takie jak galerie zdjęć.
Więcej zasobów
- Hack do pola wyboru
- Dokumenty MDN włączone: zaznaczone
- Specyfikacja W3C: sprawdzona
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Każdy | 3.1+ | Każdy | 9+ | 9+ | każdy | każdy |