Detectar si un checkbox está marcado únicamente con CSS es posible gracias a la pseudoclase :checked, una herramienta especialmente útil para crear formularios, interruptores y elementos interactivos sin JavaScript.
La pseudoclase :checked en CSS permite seleccionar automáticamente determinados controles de formulario cuando el usuario los activa.
Gracias a ella puedes modificar colores, mostrar contenido, cambiar estilos o incluso crear pequeñas interfaces interactivas utilizando solamente HTML y CSS.
En este tutorial vas a aprender cómo detectar un checkbox marcado con :checked, cómo combinar esta pseudoclase con otros selectores y qué posibilidades tienes para aplicarla en tus proyectos.
¿Qué es la pseudoclase en CSS? 🎯
La pseudoclase :checked es un selector CSS que identifica determinados elementos de formulario cuando se encuentran en estado seleccionado.
Normalmente se utiliza con elementos input de tipo checkbox y radio, aunque también puede intervenir en algunos elementos relacionados con opciones seleccionables.
Puedes consultar la definición técnica de esta pseudoclase en la documentación de :checked de MDN Web Docs.
Su sintaxis básica es extremadamente sencilla:
input:checked {
/* Estilos cuando el elemento está marcado */
}Con este selector le estás indicando al navegador que aplique determinadas reglas únicamente a los elementos input que se encuentren marcados.
Ejemplo básico para detectar un checkbox marcado ✅
Imagina que tienes un formulario con una sencilla casilla de aceptación.
El código HTML podría ser el siguiente:
<label>
<input type="checkbox">
Acepto las condiciones
</label>Ahora puedes comprobar visualmente cuándo ese checkbox está activo mediante :checked.
input:checked {
accent-color: green;
}Cuando el usuario marque la casilla, el navegador aplicará el color definido mediante la propiedad accent-color.
Esta propiedad permite personalizar fácilmente el color de determinados controles nativos del navegador como checkboxes, botones radio y barras de progreso.
Puedes encontrar más información sobre esta propiedad en la documentación de accent-color de MDN.
Cómo usar paso a paso 🛠️
Para utilizar correctamente la pseudoclase :checked, solamente necesitas crear el elemento HTML y después seleccionar su estado activo mediante CSS.
- Añade un checkbox HTML utilizando
<input type="checkbox">. - Asigna una clase o identificador si quieres seleccionar únicamente una casilla determinada.
- Utiliza la pseudoclase
:checkedinmediatamente después del selector correspondiente. - Añade los estilos CSS que quieras aplicar cuando la casilla esté marcada.
- Comprueba el resultado marcando y desmarcando el checkbox desde el navegador.
Por ejemplo, puedes utilizar una clase para controlar solamente una casilla concreta:
<input class="mi-checkbox" type="checkbox">Después puedes detectar su estado activo de esta manera:
.mi-checkbox:checked {
accent-color: #2ecc71;
}Este sistema resulta especialmente práctico porque no necesita JavaScript para reaccionar al estado del checkbox.
Cambiar el estilo de otro elemento cuando el checkbox está marcado 🔄
Una de las posibilidades más interesantes de :checked consiste en modificar otros elementos dependiendo del estado de la casilla.
Para conseguirlo puedes combinar :checked con los combinadores CSS, especialmente + y ~.
Supongamos que quieres cambiar el color de un texto cuando el usuario marque una casilla.
Tu HTML podría ser:
<input type="checkbox" id="opcion">
<label for="opcion">Activar opción</label>Puedes modificar el elemento inmediatamente posterior utilizando el selector de hermano adyacente +.
#opcion:checked + label {
color: green;
font-weight: bold;
}Cuando el usuario marque el checkbox, el elemento <label> situado justo después cambiará automáticamente de apariencia.
Esta combinación de :checked + elemento resulta muy habitual para diseñar interruptores personalizados, botones seleccionables y controles visuales.
Mostrar contenido cuando un checkbox está marcado 👁️
También puedes utilizar :checked para mostrar u ocultar contenido, consiguiendo comportamientos que normalmente asociarías con JavaScript.
Imagina el siguiente código:
<input type="checkbox" id="mostrar">
<label for="mostrar">Mostrar información</label>
<div class="contenido">
Este contenido estaba oculto.
</div>Primero puedes ocultar el contenido mediante CSS:
.contenido {
display: none;
}Después puedes hacer que aparezca cuando el checkbox esté seleccionado:
#mostrar:checked ~ .contenido {
display: block;
}El símbolo ~ es el combinador general de hermanos, que permite seleccionar determinados elementos posteriores que comparten el mismo elemento padre.
Cuando el checkbox pasa al estado :checked, .contenido cambia de display: none a display: block.
Este pequeño truco permite crear acordeones sencillos, paneles desplegables, menús y bloques de información interactivos sin escribir JavaScript.
Crear un interruptor con 🎚️
Otra aplicación muy frecuente consiste en crear un toggle switch o interruptor CSS utilizando un checkbox oculto.
El checkbox mantiene internamente los estados marcado y desmarcado, mientras que CSS se encarga de representar visualmente esos estados.
Por ejemplo:
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>Después puedes detectar cuándo el checkbox está activo:
.switch input:checked + .slider {
background: green;
}Cuando el usuario pulsa el interruptor, el checkbox cambia de estado y el selector input:checked + .slider permite modificar inmediatamente su apariencia.
Este método se utiliza con frecuencia para crear interruptores de configuración, controles de preferencias y botones activar/desactivar.
Diferencia entre y 🔍
Es importante no confundir :checked con conceptos utilizados para detectar opciones seleccionadas dentro de otros elementos HTML.
:checked está especialmente pensado para controles como checkboxes y botones radio.
Un checkbox puede encontrarse marcado o desmarcado:
<input type="checkbox" checked>El atributo HTML checked establece el estado inicial del elemento, mientras que la pseudoclase CSS :checked detecta su estado actual.
Esto significa que el usuario puede marcar o desmarcar posteriormente la casilla y CSS reaccionará automáticamente.
Usar con botones radio 🔘
La pseudoclase :checked también funciona con inputs de tipo radio, por lo que puedes utilizarla para conocer qué opción ha seleccionado el usuario.
Por ejemplo:
<input type="radio" name="plan" id="basico">
<label for="basico">Plan básico</label>
<input type="radio" name="plan" id="premium">
<label for="premium">Plan premium</label>Puedes destacar visualmente la opción seleccionada utilizando:
input[type="radio"]:checked + label {
font-weight: bold;
color: green;
}De esta forma solamente el label asociado al botón radio seleccionado recibirá esos estilos.
Combinar con selectores de atributos 🧩
También puedes hacer que tu código sea más específico combinando :checked con selectores de atributos.
Por ejemplo:
input[type="checkbox"]:checked {
accent-color: green;
}Este selector afectará exclusivamente a los elementos <input> cuyo atributo type sea checkbox y que además se encuentren marcados.
Esta técnica resulta recomendable cuando tu formulario contiene diferentes tipos de inputs y controles interactivos.
Tabla resumen sobre 📋
| Selector | Qué detecta | Uso habitual |
|---|---|---|
input:checked | Cualquier input compatible marcado | Detectar elementos activos |
input[type="checkbox"]:checked | Checkbox marcado | Casillas de verificación |
input[type="radio"]:checked | Radio seleccionado | Opciones excluyentes |
input:checked + label | Label posterior al input activo | Cambiar estilos visuales |
input:checked ~ .contenido | Elementos hermanos posteriores | Mostrar contenido |
.clase:checked | Checkbox concreto mediante una clase | Controles específicos |
Ventajas de utilizar 🚀
Utilizar :checked en CSS puede simplificar considerablemente algunas interacciones básicas de tu página web.
Entre sus principales ventajas destaca que no necesitas cargar JavaScript para detectar visualmente si una opción está marcada.
También puedes conseguir interfaces más ligeras y fáciles de mantener cuando solamente necesitas alternar estilos o mostrar pequeños bloques de contenido.
Otra ventaja es que funciona directamente con el comportamiento nativo de los formularios HTML, por lo que puedes mantener una estructura relativamente sencilla.
Además, combinar :checked con selectores CSS modernos abre muchas posibilidades para crear componentes interactivos.
¿Cuándo deberías utilizar JavaScript en lugar de ? 💡
Aunque :checked resulta muy potente, no sustituye a JavaScript cuando necesitas realizar operaciones complejas después de detectar el estado del checkbox.
Si necesitas guardar información, realizar cálculos, enviar datos mediante AJAX, modificar elementos distantes del documento o ejecutar funciones, probablemente necesitarás JavaScript.
Puedes consultar cómo trabajar con eventos y elementos del DOM en la guía del Document Object Model de MDN.
Para cambios puramente visuales, sin embargo, CSS y :checked suelen ser suficientes y permiten mantener el código mucho más compacto.
Errores frecuentes al utilizar ⚠️
Uno de los errores más habituales consiste en intentar aplicar :checked directamente sobre cualquier elemento HTML, cuando esta pseudoclase solamente funciona con elementos que pueden encontrarse realmente en ese estado.
Otro problema frecuente aparece al utilizar + sin respetar la estructura HTML, ya que este combinador únicamente puede seleccionar al hermano situado inmediatamente después del elemento.
También debes tener cuidado con ~, porque solamente puede seleccionar elementos hermanos posteriores que compartan el mismo padre.
Revisar la estructura de tu HTML suele resolver la mayoría de problemas cuando un selector basado en :checked no parece funcionar.
Compatibilidad de con los navegadores 🌐
La pseudoclase :checked cuenta con un soporte muy amplio en los navegadores modernos.
Puedes utilizarla en proyectos habituales con Chrome, Firefox, Edge y Safari sin necesitar soluciones especialmente complejas.
Esto convierte a :checked en una opción fiable para añadir pequeñas interacciones basadas en formularios mediante CSS.
Conclusión 🎯
Aprender cómo detectar un checkbox marcado con :checked te permite aprovechar uno de los recursos más útiles de CSS para crear elementos interactivos sencillos.
Con una regla tan básica como input:checked puedes identificar cuándo una casilla está activa y modificar inmediatamente su apariencia.
Si además combinas :checked con selectores como + y ~, podrás modificar otros elementos, mostrar contenido oculto o crear interruptores personalizados.
Para interacciones visuales sencillas, :checked puede ahorrarte JavaScript, reducir código y facilitar el mantenimiento de tu página.
