Question

我正在尝试在焦点（？）

时禁用firefox单选按钮的反转样式

ugly on focus

看起来像下面的无焦点版本，即使是专注。因此，转换将是在中心添加检查点而不会使其周围的半圆变化。

nice not on focus

我尝试过使用

[type="radio"]:checked {
         -moz-appearance: none; }

和

 [type="radio"]:focus {
         -moz-appearance: none; }

和

[type="radio"]:active {
         -moz-appearance: none; }

但没有任何作用。我搜索过，但一无所获。我希望用CSS做到这一点。

这是一个小提琴：http://jsfiddle.net/m5FS6/

Answer 1

以下是请求的Javascript解决方案：live demo。

这是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
<style>
input[type="radio"],
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    -moz-appearance: none;
}
</style>
</head>
<body>
    <form>
        <input type="radio"> First radio
            <br>
        <input type="radio"> Second radio
            <br>
        <input type="checkbox"> First checkbox
            <br>
        <input type="checkbox"> Second checkbox
    </form>
<script>
var radios = document.querySelectorAll('input[type="radio"]');
for (var i=0; i<radios.length; i++) {
    radios[i].onfocus = function() {
        this.blur();
    }
}

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i=0; i<checkboxes.length; i++) {
    checkboxes[i].onfocus = function() {
        this.blur();
    }
}
</script>
</body>
</html>

。
对财产appearance要非常小心。在Chrome25 +（可能更早）中，使得有问题的输入不显示。在我看来，Firefox表现出不合逻辑的行为。这通常不是一个好兆头。

最后，您现在应该在标题中添加标记javascript以及标记form。你应该纠正它：没有elemtent[type="radio"]，甚至没有element[type="radio"]。在小提琴中你有正确的代码，但你的问题看起来并不像现在这样聪明。

Firefox单选按钮焦点样式

1 个答案: