La pseudo-class :checked en CSS

La pseudo-class :checked es una de las herramientas más versátiles de CSS para crear interfaces interactivas sin usar JavaScript. Con ella puedes detectar cuándo un checkbox, un radio button o un option están seleccionados, y a partir de ahí modificar estilos, activar elementos, mostrar u ocultar contenido, crear toggles, pestañas y mucho más.

:checked es la forma más directa de “escuchar” interacciones del usuario solo con CSS. En proyectos donde se busca simplicidad, lo primero que hago es apoyarme en esta pseudoclase para responder a estados visuales sin recurrir a scripts.

Anteriormente te mostraba una de las pseudoclases más importantes como lo es la pseudo-class nth-child en CSS, para seleccioanr elementos hijos. 

Qué es la pseudo-class :checked en CSS y para qué sirve

La pseudo-class :checked representa cualquier elemento HTML que pueda tener un estado de activación:

• <input type="checkbox">
• <input type="radio">
• <option> dentro de <select>

Siempre que uno de ellos está marcado o seleccionado, :checked coincide con él.

Elementos que pueden usar :checked

• Checkbox con el atributo checked.
• Radio buttons seleccionados dentro de un mismo grupo.
• Opciones de un <select> (aunque el nivel de soporte visual depende del navegador).

Cómo funciona el estado “encendido” en HTML

El estado checked es booleano: o está marcado o no lo está.

Ejemplos válidos:

<input type="checkbox" checked>
<input type="radio" checked>
<option selected>Opción</option>

Muy útil para activar estilos en cascada: cuando un input cambia de estado, toda la interfaz puede reaccionar.

Sintaxis básica del selector :checked y ejemplos

El selector de la pseudo-class :checked representa (permite seleccionar) a cualquier elemento HTML radio (<input type="radio">), checkbox (<input type="checkbox">) u option (<option> en un <select>).

En otras palabras, podemos obtener cualquiera de los elementos HTML anteriormente citados que se encuentren "encendidos" con esta pseudo-class:

<input type = "checkbox" checked>
<input type = "radio" checked>
<option value="1" selected>option</option>

El selector checked es ideal para cambiar de estilo a las checkbox que son las casillas de verificación en los formularios de una manera sencilla sin emplear JavaScript y que funcionan muy bien al emplear las transiciones para los cambios de un estado a otro como hemos visto en otros tutoriales en los que hablamos de las transiciones en CSS:

Una vez obtenidos los elementos, es posible definir un nuevo estilo en los mismos, sus hijos, elementos HTML vecinos, etc; por ejemplo, en el caso de un formulario, podemos definir un estilo para el label hermano o adyacente al checkbox al cual se le a encendido:

input[type="checkbox"]:checked + label { 

}

Y por supuesto, puedes crear tus propias transiciones y de esta forma potenciar el aspecto visual sin emplear una línea de JavaScript de una manera muy sencilla.

Ejemplos con checkbox:

input[type="checkbox"]:checked {
 border: 2px solid blue;
}

Ejemplos con radio buttons:

input[type="radio"]:checked {
 outline: 2px solid red;
}

Ejemplo con option dentro de select:

option:checked {
 color: green;
 font-weight: bold;
}

:checked con combinadores (+ y ~):

#toggle:checked ~ .panel {
  display: block;
}

• + afecta solo al hermano inmediato.
• ~ afecta a todos los hermanos posteriores.

Checkbox personalizado:

<input type="checkbox" id="dark">
<label for="dark">Modo oscuro</label>
#dark:checked + label {
 color: #fff;
 background: #000;
}

Panel que se expande:

#more:checked ~ .extra {
 display: block;
}

Radio inputs ocultos con labels visibles. Este patrón es ideal para crear “botones falsos”:

.radio-hidden {
 position: absolute;
 left: -9999px;
}
.radio-hidden:checked + label {
 color: red;
}

El atributo for para activar elementos HTML

Existe un atributo que puede ser empleado en conjunto con los <label> llamado for que permite activar los elementos HTML checkboxs y radios con tan solo aplicar un clic en el label sin la necesidad de emplear JavaScript.

Realiza clics sobre los siguientes labels:

Cómo ves, es muy fácil emplear la pseudo selector CSS3 :checked para seleccionar uno o más elementos basándonos en si está o no seleccionado y potenciarlo con otros selectores, como el selector de hermandad +

Uso del atributo for en CSS

Para habilitar esta función solo debemos colocar el mismo valor del atributo id de los checkboxs y/o radios en el for del label.

Ejemplo del atributo for en CSS

<input id="arya-stark" type="checkbox" >
<label for="arya-stark">Arya Stark</label>

Dando estilo a los elementos encendidos mediante la pseudo-class :checked

Usando como base el HTML presentado anteriormente, es posible seleccionar los input que se encuentren encendidos con la siguiente selector:

input:checked{}

O el label adyacente al input "encendido":

input:checked + label{}

Dando estilo a los checkboxs y radios encendidos mediante la pseudo-class :checked

Aplicar una regla de estilo al label cuando el input de tipo checkbox se encuentra "encendido" (<input type = "checkbox" checked >) es tan sencillo como aplicar el siguiente selector:

input:checked + label{ color: #FFFFFF;}

Y en el caso de los elementos radios:

input:checked + label{ color: #FFFFFF;}

¿:unchecked con CSS?

En realidad no existe dicho selector, que por el nombre puedes imaginarte que sería el negado del selector anterior, es decir, cuando no está encendido o presionado el elemento, el que está de-seleccionado; para esto lo que puedes hacer es emplear el CSS base del elemento:

input[type="checkbox"] {
  // Unchecked Estilo
}
input[type="checkbox"]:checked {
  // Checked Estilo
}

O una versión equivalente de lo anterior:

input[type="checkbox"]:not(:checked) {
  // Unchecked Estilo
}

Aunque es agregar más ruido pero también es otra opción.

Diseñar elementos marcados (checkbox y radio) sin JavaScript

Cambiar estilos del input

input:checked {
 box-shadow: 0 0 0 3px orange;
}

Cambiar estilos del label con + (selector adyacente)

Esta es una de mis técnicas favoritas. Cuando el input cambia, el label responde:

input[type="checkbox"]:checked + label {
 color: #fff;
 background: #333;
}

Lo uso mucho para mostrar al usuario que su elección cambió sin tener que escribir una línea de JS.

Integrar transiciones para animar estados

input + label {
 transition: all .3s ease;
}

De esta forma los cambios entre checked y unchecked son suaves y modernos.

Usar el atributo for para activar inputs con un clic

Siempre recomiendo vincular label + input, ya que mejora la accesibilidad y la usabilidad.

<input id="arya" type="checkbox">
<label for="arya">Arya Stark</label>

Como consejo, pon el mismo valor en id y for, y puedo hacer clic en el texto para activar el input.

Errores comunes y buenas prácticas

• No repetir IDs.
• No usar labels sin for cuando el input está oculto.
• Mantener el label cerca del input para claridad semántica.

Conclusión

La pseudo-class :checked es una de las funciones más potentes de CSS moderno, sobre todo si quieres interfaces dinámicas sin JavaScript. Permite detectar el estado activado de checkbox, radios y options, y a partir de ello controlar estilos, mostrar contenido, crear toggles, pestañas, acordeones o efectos UI completos.

En mi propia práctica, es un recurso que uso constantemente para simplificar código y mejorar la usabilidad combinando label, for, transiciones y selectores adyacentes.

Preguntas frecuentes

• ¿Qué elementos soportan :checked?
  • Checkbox, radios y option.
• ¿Puedo estilizar un option seleccionado?
  • Sí, aunque el soporte visual depende del navegador.
• ¿Existe :unchecked?
  • No, debe simularse con estilos base o :not(:checked).
• ¿Puedo crear tabs sin JavaScript?
  • Sí, usando radio buttons + :checked.
• ¿Cómo hago un toggle solo con CSS?
  • Un checkbox oculto + label + :checked.

Siguiente selector, la pseudo-class :empty, selecciona cualquier elemento que no tenga hijos.