El selector :checked CSS

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>.

<form class="demo">
  <input type="radio" name="sexo" id="m" value="m">
  <label for="m">Señor</label>
  <br>
  <input type="radio" name="sexo" id="h" value="h">  
  <label for="h">Señora</label>
</form>

 Señor
 Señora

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;}

<form class="demo activado">
  <input type="radio" name="sexo1" id="m1" value="m">
  <label for="m1">Señor</label>
  <br>
  <input type="radio" name="sexo1" id="h1" value="h">  
  <label for="h1">Señora</label>
</form>

 Señor
 Señora

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;}

<form class="demo escondido">
  <input type="radio" name="sexo2" id="m2" value="m">
  <label for="m2">Señor</label>
  <br>
  <input type="radio" name="sexo2" id="h2" value="h">  
  <label for="h2">Señora</label>
</form>

Señor
Señora

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.