如何使单选按钮内的按钮可点击？答案

【问题标题】：How can I make a button clickable within a radio button?如何使单选按钮内的按钮可点击？
【发布时间】：2016-12-30 13:24:13
【问题描述】：

我知道我可以将单选按钮旁边的可点击文本设置为按钮，以便单击文本切换单选按钮。

<label>
    Click me
    <input type="radio" value="selected"><br>
</label>

我想要一个按钮作为我的标签，但是当我这样做时，当我单击该按钮时单选按钮不会切换。

<label>
    <button type="button">Click</button>
    <input type="radio" value="selected"><br>
</label>

如何使按钮标签在单击时切换单选按钮？

我想这样做，因为我有一些代码使用包含样式图像的按钮，我想将其更改为使用下面的单选按钮并保留现有按钮。

【问题讨论】：

标签： html

【解决方案1】：

您可以使用 CSS 的 pointer-events 使鼠标事件“穿过”按钮并落在标签上：

button
{
    pointer-events: none;
}

<label for="target">
    <button type="button">Click</button>
    <input id="target" type="radio" value="selected"><br>
</label>

请注意，如果标签包含多个人工输入元素，您还必须设置标签的 for 属性才能正常工作。

另请注意，这会使按钮完全无法访问，因此将不会再触发任何事件处理程序（但这似乎是您想要的）。

【讨论】：

【解决方案2】：

此问题与this question 重复。

answer 建议使用触发标签的鼠标事件的伪元素。

label:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: transparent;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

answer 的 JSF 中。

【讨论】：