我正在尝试<button>在<label>移动设备<输入类型="无线电">中放入一个

Question

我一个月前问过这个问题：我试图在的<标签>中放置一个<按钮>

我标记为正确的答案非常有效...对于我测试的桌面浏览器。在我的iPhone 6上测试，Safari和Chrome的按钮都无法点击。

正确答案片段复制如下：

button {
pointer-events:none;
}

<h1>Choose A or B</h1>
<input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label>
<input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>

有没有适用于智能手机和台式机的解决方案？

我可以摆脱<input type=“radio”>并从头开始重写JavaScript中的单选按钮行为，但我希望我不需要这样做。有没有更简单的方法？

Answer 1

<h1>Choose A or B</h1>
<label>
<input type="radio" name="mode" value="create">
<span style="-webkit-appearance: button;">create table</span>
</label>
<label>
<input type="radio" name="mode" value="create">
<span style="-webkit-appearance: button;">create field</span>
</label>