El “truco de casilla de verificación” es donde se utiliza un <label> y <input type="checkbox"> y, por lo general, algún otro elemento que intentas controlar, como este:
<label for="toggle">Do Something</label>
<input type="checkbox" id="toggle">
<div class="control-me">Control me</div>Luego, con CSS, oculta la casilla de verificación por completo. Probablemente sacándolo de la página con posicionamiento absoluto o estableciendo su opacidad en cero. Pero solo porque la casilla de verificación está oculta, al hacer clic en el <label> todavía activa y desactiva su valor. Luego puede usar el combinador de hermanos adyacente para diseñar el <div> diferente basado en el :checked estado de la entrada.
.control-me {
/* Default state */
}
#toggle:checked ~ .control-me {
/* A toggled state! No JavaScript! */
}Por lo tanto, puede diseñar un elemento de manera completamente diferente según el estado de esa casilla de verificación, que ni siquiera ve. Con buena pinta. Veamos un montón de cosas que puede hacer el “Checkbox Hack”.
Ver la pluma
El truco de la casilla de verificación por Chris Coyier (@chriscoyier)
en CodePen.
Algunas de estas cosas cruzan la línea de lo que “debería” hacer con CSS e introduce una semántica cuestionable. Sigue siendo muy divertido jugar con él y es genial que sea posible, pero en general, el comportamiento funcional debe ser controlado por JavaScript.
Botones de opción y casillas de verificación de diseño personalizado
Ver la pluma
Casillas de verificación personalizadas con CSS solo por Geoffrey Crofte (@GeoffreyCrofte)
en CodePen.
Puede ocultar la interfaz de usuario predeterminada de un botón de opción o casilla de verificación y mostrar una versión personalizada justo encima.
- Iniciado por Ryan Seddon
- Similar de Martin Ivanov
- Para usar en formularios de Wufoo por mí
Sistema de archivos como “menú de árbol”
Demo de Ryan Seddon
Áreas con pestañas
El patrón de diseño de las “pestañas” simplemente activa y desactiva las áreas, perfecto para el truco de la casilla de verificación. Pero en lugar de casillas de verificación, en las que cualquier casilla de verificación puede estar activada o desactivada independientemente una de la otra, estas pestañas usan botones de opción en los que solo uno por grupo puede estar activado a la vez (como que solo una pestaña puede estar activa a la vez).
Demostración de las pestañas funcionales de CSS revisadas:
Ver la pluma
Pestañas CSS funcionales de Chris Coyier (@chriscoyier)
en CodePen.
Menús desplegables
Ver la pluma
Menú desplegable de botones de radio por Chris Coyier (@chriscoyier)
en CodePen.
Pulse alterna
Un interruptor puede tomar la forma de ENCENDIDO / APAGADO, lo que se puede hacer con un solo <input type="checkbox">. ¡Como alternar emoji!
Ver la pluma
Interruptor de palanca de casilla de verificación CSS por Chris Coyier (@chriscoyier)
en CodePen.
O podría ser múltiple <input type="checkbox"> elementos para cambiar entre diferentes valores distintos.
Esas son entradas de radio en esta calculadora de MPG
Preguntas frecuentes reveladoras de respuestas
Probablemente solo usarías un <details>/<summary> combo para esto en estos días, pero las secciones expandibles se pueden hacer con el truco de la casilla de verificación.
Ver la pluma
Preguntas frecuentes sin detalles / resumen (truco de casilla de verificación) por Chris Coyier (@chriscoyier)
en CodePen.
Ocultar la barra lateral
Como el tema de Octopress de la vieja escuela.
Ver la pluma
Ocultar la barra lateral con Checkbox Hack por Chris Coyier (@chriscoyier)
en CodePen.