El selector :checked
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
.