Question

I have made an html wizzard for making order. There are four steps, in each is bunch of radio buttons. I redesigned each radio button label to large button (and hidding the radio input itself). This all work greatly on classic PC. But I’ve run into problem with mobile device (iPHONE & iPAD, I can’t test it on other devices, because I don’t have any), which are unable to select the radio button.

I’ve found only one notice of this problem here on stackoverflow, but the solution published there isn’t function either.

The original inspiration comes from apple online store for selecting differnt color of device.

My example code:

<label class="option" for="edit-term-worker">
  <input id="edit-term-worker" class="form-radio" type="radio">
  <span class="worker-name">Sandra</span>
</label>

It’s there need some JS, or I’have some flaw in my code?

Thank you all for your help.

Answer 1

Have you tried this?

<input id="edit-term-worker" class="form-radio" type="radio" />
<label class="option" for="edit-term-worker"  onclick="">
<span class="worker-name">Sandra</span>
</label>

EDIT: Added an empty onclick, according to this that should do the trick: HTML <label> command doesn't work in Iphone browser

Note that you shouldn’t put the radio button into the label tag, it should be outside.