'块样式'单选按钮工作的一切,但iPad [英] 'Block Style' radio buttons working on everything BUT iPad

查看:316
本文介绍了'块样式'单选按钮工作的一切,但iPad的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一组单选按钮,并对它们进行了样式设置,以便它们显示:block,使它们显示为按钮(也隐藏了单选按钮本身)。这在Chrome和Firefox在桌面和Android平板电脑上工作伟大的,但不会在iPad上工作。



请参阅:
http:// jsfiddle .net / WhNRK /



由于某种原因,在iPad上块元素不是活动,并且不设置单选按钮。如果我'取消隐藏单选按钮,你可以看到它没有得到选择时点击块。但是,如果我单击实际的单选按钮本身,它正确选择,甚至更改块元素的背景颜色,因为它应该!
http://jsfiddle.net/WhNRK/1/



有什么想法,我做错了,是导致这种情况发生?似乎应该是相当简单的功能,所以我希望它只是一些简单的我忽略...



这是合并的网站的主要用途内部是为移动设备,所以肯定需要它在任何iOS设备上工作(假设它可能发生在iPhone上,只是没有一个在这里与我现在测试)。



感谢您可能有的任何建议!

解决方案

Fisrt的所有,你的小提琴确实不工作在iphone上,无论是在safari和chrome。



我很好奇,我试图通过与你的代码一点点找到解决方案。在改变html一点,使标签的输入的兄弟,而不是一个父。仍然对我的iPhone没有影响。



在一些googling之后,我发现这个: http://forums.macrumors.com/showthread.php?t=785632
我尝试了解决方案,它似乎工作,allthough我没有线索为什么。



您必须添加 onclick =



我没有在iPad上测试它,但因为它只是一个大的iPhone,它应该工作相同。可以在这里找到一个工作示例: http://jsfiddle.net/WhNRK/15/ p>

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!

解决方案

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/

这篇关于'块样式'单选按钮工作的一切,但iPad的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆