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>

使用html按钮作为单选输入标签

1 个答案: