La :checkedpseudoclase en CSS selecciona elementos cuando están en el estado seleccionado. Solo está asociado con elementos input ( ) de tipo radio y checkbox. El :checkedselector de pseudo-clase coincide con los tipos de entrada de radio y casilla de verificación cuando se marca o cambia a un estado activado. Si no están seleccionados o marcados, no hay coincidencia.
Entonces, cuando una casilla de verificación está marcada y está apuntando a la etiqueta inmediatamente después:
input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; ) El texto de la etiqueta cambiará de gris cursiva a rojo normal.
CSS is Awesome CSS es impresionante
Lo anterior es un ejemplo del uso de la :checkedpseudoclase para hacer que los formularios sean más accesibles. La :checkedpseudoclase se puede utilizar con entradas ocultas y sus etiquetas visibles para crear widgets interactivos, como galerías de imágenes.
Más recursos
- El truco de la casilla de verificación
- MDN Docs activado: comprobado
- La especificación W3C en: comprobado
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | 3.1+ | Alguna | 9+ | 9+ | alguna | alguna |