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>

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?

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?

回答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>
  

来源：https://stackoverflow.com/questions/59454248/im-trying-to-put-a-button-inside-an-input-type-radio-s-label-for-mobile