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

Answer 1

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

Here's an example:

html:

  
  button

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;
}