html - How does css checkbox hack work? -


i came across switch toggle button created using css. known checkbox hack.

for doesn't know checkbox css hack is, please read here

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

i tried out , working fine. didn't understand how working because not clicking on checkbox.

so have 2 questions

  1. how working ?

  2. instead of absolute positioning tried display: none; still worked. method have drawbacks?

the way works using <label> element. input element can (and should) have label. can tell browser label belongs label using for attribute, referring input's name:

<input name="myname" /> <label for="myname">label</label> 

whenever click label, focuses input (or in case of checkboxes, toggles it).

the label , checkbox don't have near each other. add few hidden checkboxes @ start or end of document , place labels anywhere on page, , they'd still focus input.

hiding checkbox through display: none cause buggy behavior on browsers. hiding view position: absolute safer.


Comments

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -