Button inside the tag

Question

I have a label with " for="the pointer to the checkbox input" ", and as far as I know, this for can only be added for label . Therefore, I need to add a <button> inside the label (I need it), but the click event does not work properly - it does not check the flag that the for points to.

What are the features that I can use here if I have to place a <button> inside a label , only with html + css encoding ?

some code, for example:

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

Answer 1

Turns out you can make <button> work with input, but only if you put <label> inside <button> .

 <button type="button"> <label for="my-checkbox">Button go outside the label</label> </button> <input type="checkbox" id="my-checkbox"> 

Although this is contrary to the W3C specifications:

The label of an interactive element should not be displayed as a descendant of a button element. https://www.w3.org/TR/html-markup/label.html

Answer 2

You can use a transparent pseudo-element that overlays the checkbox and a button that will capture mouse events.

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

Answer 3

The best solution is a button-like style.

If you use a CSS framework such as bootstrap, you can give label classes such as btn and btn-default. It will look like a button. You might need to manually adjust the css property of the row-height as follows:

 label.btn { line-height: 1.75em; } 

Then, to get the styles for clicking the button as a button, add the following styles:

 input[type=radio]:checked ~ label.btn { background-color: #e6e6e6; border-color: #adadad; color: #333; } 

This will check the input and give the next label element in dom, which has styles like btn, bootstrap btn-default. Adjust the colors as appropriate.

Answer 4

I would suggest you use the usual way to use this checkbox and use the css style so that it looks like a cuz button. I don’t think you need a button that you just try to get as a button and the button there to be used as a button will be bad as HTML check too you should always use a tag for the purpose they are made for

Answer 5

HTML:

 <label for="whatev" onclick="onClickHandler"> <button>Imma button, I prevent things</button> </label> 

JS:

 const onClickHandler = (e) => { if(e.target!==e.currentTarget) e.currentTarget.click() } 

Target is the target of the click, currentTarget is the label in this case.

Without an if statement, an event is fired twice if it is called outside the scope of the event prevention.

Not a cross browser.