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, Please read it here

https://css-tricks.com/the-checkbox-hack/

I tried it out and it was working perfectly fine. But I didn't understand how this is working because we are not clicking on the checkbox.

So I have 2 questions

1. How is this working ?

2. Instead of absolute positioning I tried it with display: none; It still worked. Does this method have any drawbacks?

Answer 1

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.

Answer 2

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.