Η :checkedψευδο-κλάση στο CSS επιλέγει στοιχεία όταν βρίσκονται στην επιλεγμένη κατάσταση. Συνδέεται μόνο με στοιχεία εισόδου ( ) τύπου ραδιοφώνου και πλαισίου ελέγχου. Ο :checkedεπιλογέας ψευδο-κλάσης ταιριάζει με τους τύπους εισόδου ραδιοφώνου και πλαισίου ελέγχου όταν είναι επιλεγμένος ή εναλλάσσεται σε κατάσταση ενεργοποίησης. Εάν δεν έχουν επιλεγεί ή επιλεγεί, δεν υπάρχει αντιστοιχία.
Έτσι, όταν ένα πλαίσιο ελέγχου είναι επιλεγμένο και στοχεύετε την ετικέτα αμέσως μετά:
input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; ) Το κείμενο της ετικέτας θα μετατραπεί από γκρι πλάγια σε κόκκινη κανονική γραμματοσειρά.
CSS is Awesome Το CSS είναι φοβερό
Τα παραπάνω είναι ένα παράδειγμα χρήσης της :checkedψευδο-τάξης για να κάνουν τις φόρμες πιο προσβάσιμες. Η :checkedψευδο-κατηγορία μπορεί να χρησιμοποιηθεί με κρυφές εισόδους και τις ορατές ετικέτες τους για τη δημιουργία διαδραστικών widget, όπως γκαλερί εικόνων.
Περισσότεροι πόροι
- Το hack πλαίσιο ελέγχου
- Έγγραφα MDN ενεργοποιημένα: επιλεγμένο
- Η προδιαγραφή W3C είναι ενεργοποιημένη
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| Οποιος | 3.1+ | Οποιος | 9+ | 9+ | όποιος | όποιος |