The pattern is: <label> <input class”real-check” type=checkbox /> <span class”fake-check”/> <strong>this is the text label</strong> </label> - visual

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.