使用html按钮作为无线电输入标签

Question

我想通过按钮完成无线电输入选择。 （这是你有几个选项的地方，你只能选择一个，通常使用无线电点） 我用了

    <input id="test"><label for="test">Click Me</label>

为了达到相同的效果，但是使用文本（当点击文本单选按钮设置为checked =“true”时，但无论我在使用HTML按钮时如何尝试接近它，我都无法通过按钮而不是单击文本来检查无线电输入。 因此，将此按钮设置为父级标签等的这个和变体对我来说不起作用。

<input id="test"><label for="test"><button>Click Me</button></label>

我可以使用类似addEventListeners的东西来设置按钮并在javascript中设置选项，但是想到可能有一种明显纯粹的HTML方式我无法理解。只是因为摆弄而继续使用small pen - 干杯

Answer 1

只需使用您的第一个示例，并将label元素设置为看起来像一个按钮。

这是一个简单的例子：

label {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  padding: 5px;
}

input {
  display: none;
}

input:checked + label {
  background: red;
}

<input id="radio1" name="radio" type="radio" />
<label for="radio1">Click me</label>
<input id="radio2" name="radio" type="radio" />
<label for="radio2">Click me</label>
<input id="radio3" name="radio" type="radio" />
<label for="radio3">Click me</label>