Re:HTML and CSS techniques to reduce your JavaScript
by charrondev on Friday June 04, 2021 @12:02AM
(#27390410)
The pattern is:
<label>
<input class”real-check” type=checkbox />
<span class”fake-check”/>
<strong>this is the text label</strong>
</label>
- visually hide the checkbox
- use a selector like “.real-check:checked + .fake-check and draw whatever you want in the fake check.
- the fake check and the text label are both inside the label element. Interacting with them will toggle the check box.
<label> <input class”real-check” type=checkbox /> <span class”fake-check”/> <strong>this is the text label</strong> </label>
- visually hide the checkbox - use a selector like “.real-check:checked + .fake-check and draw whatever you want in the fake check. - the fake check and the text label are both inside the label element. Interacting with them will toggle the check box.