Button inside a label

Question

I have a label with "for="the pointer to the checkbox input"" and as long as I know, this for can be added only for label. Therefore, I need to add inside of the label a <button>(I need it), but the click event isn't working properly - it doesn't check the checkbox the for is pointing to.

What are the possibilities I can use here if I must place <button> inside the label, with only html+css coding?

some code for example:

<input type="checkbox" id="thecheckbox" name="thecheckbox"> <div for="thecheckbox"><button type="button">Click Me</button></div> 

Answer 1

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

Answer 2

You can use transparent pseudo element that overlays the checkbox and the button itself that will catch mouse events.

Here's an example:

html:

<label>   <input type="checkbox">   <button class="disable">button</button> </label> 

css:

.disable{pointer-events:fill} label{position:relative} label:after{   position: absolute;   content: "";   width: 100%;   height: 100%;   background: transparent;   top:0;   left:0;   right:0;   bottom:0; }