Block Style buttons work on everything, but iPad

Question

I have a group of radio buttons, and they stylized them so that they appear: a block so that they appear like buttons (also hid the switch itself). This works great on Chrome and Firefox on desktops and tablets for Android ... but will not work on iPad.

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

For any reason, the block element is not “active” on the iPad and does not set a switch. If I “show” the radio button, you can see that it does not get a choice when you click on the block. However, if I click on the switch itself, it correctly selects and even changes the background color of the block element, as it should! http://jsfiddle.net/WhNRK/1/

Any idea as to what I'm doing wrong, what causes this? It seems like this should be pretty simple functionality, so I hope this is just something simple that I'm missing ...

The main use of the site on which it is built-in is for mobile devices, so it is definitely necessary that it works on any iOS device (assuming that this will probably also happen on the iPhone, it just doesn’t need it to be here with me right now).

Thanks for any suggestions you may have!

Answer 1

In general, your violin really does not work on the iphone, both on safari and on chrome.

Curious, like me, I tried to find a solution by playing a bit with your code. The modified html is little to make the shortcut an input brother, not a parent. Still not affecting my iphone.

After some googling, I found this: http://forums.macrumors.com/showthread.php?t=785632 I tried the solution and it seems to work, although I don’t know why. I think this is some kind of mistake ...

You must add onclick="" to your tags.

I have not tested it on the iPad, but since it is just a big iPhone, it should work the same. A working example can be found here: http://jsfiddle.net/WhNRK/15/