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
how working ?
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
Post a Comment