How does css checkbox hack work?

Question

I just came across the switch toggle button which is created only using css. It known as the checkbox hack.

For those who doesn\'t know what a checkbox css hack is,

Answer 1

The way it works is by using the element. Any input element can (and usually should) have a label. You can tell the browser which label belongs to which label by using a for attribute, referring to the input's name:

Label

Whenever you click the label, it focuses the input (or in case of checkboxes, toggles it).

The label and checkbox don't have to be near each other. You could add a few hidden checkboxes at the start or end of a document and place the labels anywhere on the page, and they'd still focus the input.

Hiding the checkbox through display: none could cause buggy behavior on certain browsers. Just hiding it from view by a position: absolute is safer.