按钮内的标签 - 单击按钮并激活标签答案

【问题标题】：label inside of button - click button and activate the label按钮内的标签 - 单击按钮并激活标签
【发布时间】：2020-05-12 01:20:47
【问题描述】：

当您单击此按钮时，如果您单击“Hello”文本，它只会选中复选框。如果您单击按钮而不是文本，则不会选中该框。我怎样才能做到无论我在哪里点击按钮，它都会选中该框？

<button>
    <label for="myId">Hello</label>
</button>


<input id="myId" type="checkbox" />

【问题讨论】：

你到底想做什么？如果你好文本在框内，如果你按下按钮，它们会不会同时按下？

标签： html button label

【解决方案1】：

您需要将标签设置为按钮的全宽和全高，如下所示：

<button style="padding: 0;">
    <label style="display: block; padding: 20px;" for="myId">Hello</label>
</button>


<input id="myId" type="checkbox" />

这是小提琴： https://jsfiddle.net/hxoqrf7v/

【讨论】：

那行不通。我仍然可以单击按钮（不是文本），它仍然不会选中该框。我还能用 CSS 做些什么来实现这一点吗？
你确定吗？唯一不会选中该框的部分是单击按钮的边框时，如果您删除按钮的边框，它在我这边可以正常工作
如果您不想对点击事件进行任何其他操作，那么您可以按照您想要的方式在标签上应用 CSS，然后删除按钮元素。
我的错，它似乎有效。是显示：块；有必要吗？
它在 Firefox 中不起作用，但在 chrome 中起作用