css - 无法摆脱 radio 和复选框中的 Firefox 焦点显示

Question

我正试图摆脱 Firefox 中的蓝色焦点轮廓。当我将 outline 设置为 0 或 none 时，没有任何反应。如果我将大纲设置为其他内容，则会出现一个单独的大纲(在示例中是方形绿色大纲)。我也试过使用盒子阴影。但是，如果我尝试删除或修改边框，则什么也不会发生。 (我无法制作单独的边框或删除自动轮廓)在示例中，我什至尝试使用带有 !important 的内联样式。当我在 Firefox 的编辑器中运行代码片段时，焦点轮廓会立即显示。

$(function(){
    $('#test').focus();
});

[type=radio]:focus {
        box-shadow:1px 1px 4px red;
        outline:1px solid green;
        border:0 !important;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="question-preview2" /> 1<br>
<input id="test" type="radio" name="question-preview2" /> 2<br>
<input style="border:none !important;" type="radio" name="question-preview2" /> 3<br>

编辑:-moz外观:无；几乎修好了……但是 radio 还是有点不同(外观凹陷)

$(function(){
    $('#test').focus();
});

input:focus{-moz-appearance:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" type="radio" name="question-preview2" /> 1 <- has sunken appearance<br>
<input type="radio" name="question-preview2" /> 2<br>
<input type="radio" name="question-preview2" /> 3<br>

Answer 1

尝试使用::-moz-focus-inner，那么您就不需要指定 :focus 伪选择器。这对我有用。