: Touch-friendly radio buttons for mobile devices? 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
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?
More posts by @Goswami781
2 Comments
Sorted by latest first Latest Oldest Best
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>
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.