Se puede hacer con el checkbox hack.
Principio
- Un label asociado a un input puede recibir el click por él
- Puede haber varios labels para un mismo input
- Ocultando el input (difícil de personalizar), queda el label para contener un control más fácil de personalizar
- La pseudoclass :checked permite ubicar un checkbox seleccionado
- El selector aaa + bbb permite seleccionar un bbb que esté (declarado) inmediatamente después de un aaa
Patrón 1
<input id="checkbox-control" type="checkbox"> <label for="checkbox-control">Control</label>
CSS:
#checkbox-control:checked + label {...}
Patrón 2
<label for="checkbox-control">Control</label> <input id="checkbox-control" type="checkbox"> <div class="target">Target</div>
CSS:
#checkbox-control:checked + .target {...}
Patrón 3
<input id="checkbox-control" type="checkbox"> <label for="checkbox-control">Control</label> <div class="target">Target</div>
CSS:
#checkbox-control:checked + label {...} #checkbox-control:checked + label + .target {...}
Ideas de aplicación
- Checkbox personalizado
- Toggle
- Tabs
- Dropdown menu
- Dot control para slider
- Árbol desplegable
Ver unos ejemplos en A check studio, en CodePen
Referencias
- Stuff you can do with the “Checkbox Hack”
https://css-tricks.com/the-checkbox-hack/ - :checked
https://css-tricks.com/almanac/selectors/c/checked/ - CSS Selector Reference
https://www.w3schools.com/cssref/css_selectors.asp
