Usa checkbox/radio + selectores para crear interacciones simples en CSS, entendiendo límites de accesibilidad y mantenibilidad.
El input hack permite mostrar/ocultar bloques usando estados nativos de formulario y selectores CSS.
Es útil para prototipos, acordeones simples y menús básicos donde no necesitas lógica compleja.
Debe usarse con criterio: para estados avanzados o accesibilidad completa, JavaScript suele ser mejor opción.
Checkbox oculto + label + selector :checked.
El <code>label</code> activa el checkbox asociado; luego CSS reacciona con <code>:checked</code> para modificar otros elementos.
Normalmente se usa el combinador de hermanos <code>+</code> o <code>~</code> para llegar al panel que quieres alternar.
No todo estado interactivo debería resolverse con hack.
Evita cadenas de selectores demasiado frágiles o dependientes del orden exacto del HTML.
Si necesitas cerrar al pulsar Escape, gestionar foco o sincronizar varios estados, usa JavaScript.
Usa checkbox/radio + selectores para crear interacciones simples en CSS, entendiendo límites de accesibilidad y mantenibilidad.
Código del tema: display: grid; gap: 1rem;
Checkbox oculto + label + selector :checked.
El label activa el checkbox asociado; luego CSS reacciona con :checked para modificar otros elementos.
Normalmente se usa el combinador de hermanos + o ~ para llegar al panel que quieres alternar.
.toggle { position: absolute; opacity: 0; }
.toggle-panel { display: none; }
.toggle:checked ~ .toggle-panel { display: block; }No todo estado interactivo debería resolverse con hack.
Evita cadenas de selectores demasiado frágiles o dependientes del orden exacto del HTML.
Si necesitas cerrar al pulsar Escape, gestionar foco o sincronizar varios estados, usa JavaScript.