我正在尝试放置< button>在< input type ="radio">的< label>内部用于手机 [英] I'm trying to put a <button> inside an <input type=“radio”>'s <label> for mobile
问题描述
I asked this question a month ago: I'm trying to put a <button> inside an <input type="radio">'s <label>
我标记为正确的答案非常适合...对于我测试的桌面浏览器.在我的iPhone 6上进行测试,无论是Safari还是Chrome浏览器,其按钮均不可点击.
The answer I marked correct worked perfectly... for the desktop browsers I tested. Testing on my iPhone 6, both Safari and Chrome have the buttons unclickable.
正确的答案片段复制如下:
Correct answer snippet copied below:
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>
是否存在适用于智能手机和台式机的解决方案?
Is there a solution that works for both smartphone AND desktop?
我可以摆脱<input type=radio>
并从头开始重写JavaScript中的单选按钮行为,但是我希望我不需要这样做.有没有更简单的方法?
I could get rid of <input type="radio">
and rewrite radio button behaviour in JavaScript from scratch, but I'm hoping I won't need to do that. Is there an easier way?
推荐答案
<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>
这篇关于我正在尝试放置< button>在< input type ="radio">的< label>内部用于手机的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!