It turns out you can make a <button>
operate an input, but only if you put the <label>
inside the <button>
.
<button type="button">
<label for="my-checkbox">Button go outside the label</label>
</button>
<input type="checkbox" id="my-checkbox">
Although this contravenes the W3C specs:
The interactive element label must not appear as a descendant of the button element.
https://www.w3.org/TR/html-markup/label.html