1

所以我有两个这样的单选按钮：

<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>

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

现在，我已经为单选按钮完成了自己的样式，所以我像这样隐藏单选圆圈：

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

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

如需演示，请从任何其他浏览器和 opera mini访问此链接。

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

4

3 回答 3

1

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

onClick我为每个按钮调用 javascript 函数，并且在 css 中，每个状态都有两个不同的规则，它们是从 javascript 切换的。事实证明，这种 hack 比其他 hack 更有效、更可靠。它还确保不仅 Opera mini，该功能还可以在任何其他处理单选按钮标签标签的浏览器（如 Opera mini）上运行。

于 2012-10-10T10:44:36.190 回答
1

Opera mini 中有一个不错的 BUG，带有标签和 css

在我的CSS中

 label {
 cursor: pointer;
 }

这会导致 Opera mini 刷新页面，每次您单击标签时都会向服务器发出 GET 请求，当您在 POST 页面上时，这会破坏流程

于 2014-03-31T07:16:26.067 回答
0

您可以将此 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";   
    }
}
于 2012-10-09T15:39:51.710 回答