Question

Checkboxes in HTML forms don’t have implicit labels with them. Adding an explicit label (some text) next to it doesn’t toggle the checkbox.

How do I make a checkbox toggle from clicking on the text label as well?

Answer 1

Set the CSS display property for the label to be a block element and use that instead of your div – it keeps the semantic meaning of a label while allowing whatever styling you like.

For example:

label {   width: 100px;   height: 100px;   display: block;   background-color: #e0e0ff; }

<label for='test'>   A ticky box! <input type='checkbox' id='test' /> </label>