'Block Style' radio buttons working on everything BUT iPad

Question

I have a group of radio buttons, and have styled them so that they display:block so that they appear like buttons (have also hidden the radio button itself). This works great in Chrome and Firefox on desktops and on android tablets...but will not work on an iPad.

See it here: http://jsfiddle.net/WhNRK/

For whatever reason the block element is not 'active' on an iPad and does not set the radio button. If I 'unhide' the radio button you can see that it doesn't get select when clicking the block. However if I click the actual radio button itself, it selects properly and even changes the block element background color as it should! http://jsfiddle.net/WhNRK/1/

Any idea as to what I'm doing wrong that is causing this to happen? Seems like it should be pretty straightforward functionality, so I'm hoping its just something simple I'm overlooking...

The primary use of the site that this is incorporated within is meant for mobile devices, so definitely need it working on any iOS device (assuming it likely happens on an iPhone as well, just don't have one here with me to test right now).

Thanks for any suggestions you may have!

Answer 1

Fisrt of all, your fiddle does indeed not work on the iphone either, both in safari and chrome.

Curious as i am, i tried to find the solution by playing a bit with your code. In changed the html a bit to make the label a sibling of the input, rather then a parent. Still with no effect on my iphone.

After some googling i found this: http://forums.macrumors.com/showthread.php?t=785632 I tryed the solution and it seems to work, allthough i have no clue why. I guess it is some sort of bug...

You have to add onclick="" to your labels.

I didn't test it on an iPad, but as it is just a big iPhone it should work the same. A working example can be found here: http://jsfiddle.net/WhNRK/15/