I am using WordPress and WP Pro-Quiz to create a quiz.

Each answer has a radio button on the side (input type="radio"). When I click anywhere on the same row from the touch-screen on my computer, the radio button is being checked.

But when I click on the row on my mobile device (in this case an iPod touch), the radio button is not being checked. I have to click exactly on the tiny radio button to check it.

So I see two possible ways of solving this problem. Either I try to make a large radio button, or I try to make the whole row "mark"-able.

What would be the easiest approach? Could someone please point me in the right direction?


If you use a <label> tag for the text next to the radio button, it should make that text clickable, even in mobile browsers.

<input type="radio" name="gender" id="male" value="male"><label for="male">Male</label><br>
<input type="radio" name="gender" id="female" value="female"><label for="female">Female</label><br> 
| improve this answer | |
  • I will try that! I saw that the label was nested like <label><input type="radio"/></label> which doesn't make it work on my IOS testing device. – nctrnl Apr 18 '13 at 14:24
  • 1
    This is also really helpful for desktop users, as catching the radio button with a mouse pointer can be difficult too. – Andrew Lott Jun 17 '13 at 13:33

Radio buttons can be fiddly on Apple devices you should opt to use UI buttons instead.

Another issue could be that the z-index on the radio buttons is not set meaning your click the form not the element.

| improve this answer | |
  • 1
    the OP is a using a premium WP plugin, they may not be able to implement this suggestion. – Prasad Ajinkya Jun 17 '13 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.