Html 标签内的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37504383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button inside a label
提问by nikoletta
I have a labelwith "for="the pointer to the checkbox input"" and as long as I know, this forcan be added only for label. Therefore, I need to add inside of the labela <button>(I need it), but the click event isn't working properly - it doesn't check the checkbox the foris pointing to.
我有一个label带“ for="the pointer to the checkbox input"”的，只要我知道，这for只能添加到label. 因此，我需要在labela内部添加<button>（我需要它），但是单击事件无法正常工作 - 它没有选中for指向的复选框。
What are the possibilities I can use here if I must place <button>inside the label, with only html+csscoding?
什么是我可以在这里使用的可能性，如果我必须将<button>里面的label，只用HTML + CSS编码？
some code for example:
一些代码例如：
<input type="checkbox" id="thecheckbox" name="thecheckbox">
<div for="thecheckbox"><button type="button">Click Me</button></div>
回答by Sinetheta
It turns out you can make a <button>operate an input, but only if you put the <label>insidethe <button>.
事实证明，你可以做一个<button>操作的输入，但只有当你把<label>里面的<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:
虽然这违反了 W3C 规范：
The interactive element label must not appear as a descendant of the button element. https://www.w3.org/TR/html-markup/label.html
交互元素标签不得作为按钮元素的后代出现。 https://www.w3.org/TR/html-markup/label.html
回答by eboye
You can use transparent pseudo element that overlays the checkbox and the button itself that will catch mouse events.
您可以使用覆盖复选框和按钮本身的透明伪元素来捕获鼠标事件。
Here's an example:
下面是一个例子：
html:
html：
<label>
<input type="checkbox">
<button class="disable">button</button>
</label>
css:
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;
}
回答by Jaakko Karhu
HTML:
HTML：
<label for="whatev"
onclick="onClickHandler">
<button>Imma button, I prevent things</button>
</label>
JS:
JS：
const onClickHandler = (e) => {
if(e.target!==e.currentTarget) e.currentTarget.click()
}
Target is the click target, currentTarget is the label in this case.
Target 是点击目标，currentTarget 在这种情况下是标签。
Without the if statement the event is fired twice if clicked outside of the event preventing area.
如果没有 if 语句，如果在事件阻止区域外单击，则事件将触发两次。
Not cross browser tested.
未经过跨浏览器测试。
回答by Kyle Goss
The best solution is to style is like a button.
最好的解决方案是样式就像一个按钮。
If you're using a CSS framework, like bootstrap, you can give the label classes such as btn and btn-default. This will style it like a button. You may need to adjust the css property of the line-height manually like so:
如果您使用的是 CSS 框架，例如 bootstrap，您可以提供标签类，例如 btn 和 btn-default。这会将其样式设置为按钮。您可能需要手动调整 line-height 的 css 属性，如下所示：
label.btn {
line-height: 1.75em;
}
Then, to get the on click styles as a button, add these styles:
然后，要将点击样式作为按钮，请添加以下样式：
input[type=radio]:checked ~ label.btn {
background-color: #e6e6e6;
border-color: #adadad;
color: #333;
}
This will take the input that is checked and give the next label element in the dom that has the class btn, bootstrap btn-default button clicked styles. Adjust colors as fit.
这将采用已检查的输入，并在具有类 btn、bootstrap btn-default 按钮单击样式的 dom 中给出下一个标签元素。根据需要调整颜色。
回答by Marius Potor
What I've done is the following:
我所做的是以下内容：
<label htmlFor="fileUpload">
<button onclick="onButtonClick">upload</button>
</label>
<input id="fileUpload" type="file" style="display: none"/>
onButtonClick() {
document.getElementById('fileUpload').click();
}
