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

1. You can bind labels to checkboxes/radios using the for= attribute. When this is set, clicking on the label toggles the checkbox. This is a standard HTML attribute.

2. You can hide the checkbox using display: none, but do test it to make sure that its value is still submitted with the form.

Answer 2

The way it works is by using the <label> 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:

<input name="myName" />
<label for="myName">Label</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.