El selector :checked

facebook-svg gplus-svg twitter-svg

El selector :checked

En el html el atributo checked puede ser utilizado con <input type = "checkbox"> para indicar que la casilla está marcada, o con <input type = "radio"> para indicar que el boton está activado.

<input type = "checkbox" checked >
<input type = "radio" checked >

En el CSS3 podemos dar formato al <input> marcado ( checked ) utilizando el selector :checked.

El apaño de la etiqueta <label>

Para vincular una etiqueta <label> con un elemento de entrada <input>,  el valor del atributo for de <label> tiene que ser igual al valor del atributo id del <input>. Esto proporciona una mejora de usabilidad especialmente en el caso de las casillas de verificación <input type = "checkbox">  y los botones de radio <input type = "radio">, ya que al hacer clic en el <label>, podemos activar o desactivar ( marcar o desmarcar ) el <input>.




Podemos dar formato a la etiqueta <label> dependiendo de si el botón de radio esta activado o no.

input[type=radio]:checked + label { color: red;}

El selector + selecciona la etiqueta <label> situada inmediatamente después de un botón de radio activado <input type="radio" checked>.


.activado input[type=radio]:checked + label { color: red;}



Incluso podemos esconder los botones de radio ( position: absolute; left: -1000em; ) dejando visible solo la etiqueta <label>. Al hacer clic en la etiqueta, esta cambia de color. El resultado parece adquirido vía JavaScript.


.escondido input[type=radio]{ position: absolute;left: -1000em; }
.escondido input[type=radio]:checked + label { color: red;}



Algunos ejemplos

Fichas con pestañas ( tabs ) realizados con HTML5 y el selector :checked de CSS3.
Paneles desplegables realizados con HTML5 y CSS3. Utiliza el selector :checked y @keyframes.
Vea una galería de imágenes realizada solo con HTML5 y CSS3. Utiliza el selector :checked.