Checkbox Hack with :checked pseudo selector

The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input elements of type radio and checkbox.

The “Checkbox Hack” is where you use a connected label and input type=”checkbox” and usually some other element you are trying to control.

Examples for Checkbox hack on Codepen:

1. https://codepen.io/GeoffreyCrofte/pen/BiHzp?editors=1100
2. https://codepen.io/chriscoyier/pen/bGNxzdd?editors=1100
3. https://codepen.io/chriscoyier/pen/eYmbybO?editors=1100
4. https://codepen.io/chriscoyier/pen/zYxbzLp?editors=1100
5. https://codepen.io/chriscoyier/pen/JjozJLv?editors=0100
6. https://codepen.io/chriscoyier/pen/qBEvjKy?editors=0100