CSS: Checkbox hack para controles personalizados

¿Cómo aplicar un estilo como respuesta a un click, usando sólamente CSS?

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

HTML:

<input id="checkbox-control" type="checkbox">
<label for="checkbox-control">Control</label>

CSS:

#checkbox-control:checked + label {...}

Patrón 2

HTML:

<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

HTML:

<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