Question

所以我有两个这样的无线电按钮：

<input type="radio" name="hello" id="a" value="a">
<label for="a">First</label>
<input type="radio" name="hello" id="b" value="b">
<label for="b">Second</label>

预期的功能是当我点击单选按钮标签上的任意位置时，无线电被选中。（我不必完全点击radiobutton的圆圈）

现在，我为radiobuttons做了自己的造型，所以我隐藏了这样的无线电圈：

input[type="radio"] {
display:none;
}

现在，它似乎在所有浏览器上运行良好但在Opera mini中打开链接并且您无法切换所选按钮，因为标签方法是在点击时选择按钮标签不起作用。你必须点击圆圈本身，因为我隐藏了圆圈，单选按钮将不起作用。

对于演示，请从任何其他浏览器和opera mini访问this link。

任何想法可以使它在Opera mini上运行。如果浏览器是Opera mini，有没有办法在css中指定不使用display:none？

Answer 1

我最后将单选按钮更改为<input type="button"...>。

按钮的

onClick我为每个按钮调用javascript函数，在css中，每个状态都有两个不同的规则从javascript切换。这种黑客比其他黑客更有效率和可靠性。它还确保不仅Opera mini，该功能也适用于处理Opera mini等单选按钮标签标签的任何其他浏览器。

Answer 2

有一个不错的BUG 在歌剧迷你与标签和CSS

我的css中有

 label {
 cursor: pointer;
 }

这导致opera mini刷新页面，每次单击标签时向服务器发出GET请求当我们进入POST页面时，这会打破流程

Answer 3

您可以将此javascript添加到您的网页。

它适用于用户代理的字符串，但通常不是一个好主意。

检查用户代理是否为Opera Mini，然后将单选按钮style.display设置为block或none

if (window.addEventListener){           
    window.addEventListener('load', setRadioButtons, false);
} else {
    window.attachEvent('onload', setRadioButtons);
} 

function setRadioButtons() {
    for (i=0; i<document.getElementsByTagName('input').length; i++) {
        if (document.getElementsByTagName('input')[i].type == 'radio' && navigator.userAgent.indexOf("Opera Mini") != -1)
            document.getElementsByTagName('input')[i].style.display = "block";
        else
            document.getElementsByTagName('input')[i].style.display = "none";   
    }
}

Opera Mini的Radiobutton问题

3 个答案: