无法摆脱收音机和复选框中的 Firefox 焦点显示

Posted 2023-05-07

【中文标题】无法摆脱收音机和复选框中的 Firefox 焦点显示

【英文标题】：Unable to get rid of Firefox focus display in radios and checkboxes

【发布时间】：2016-08-15 10:22:56

【问题描述】：

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

$(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 外观：无；几乎修好了……但收音机看起来还是有点不同（有凹陷的外观）

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

【参考方案1】：

尝试使用 ::-moz-focus-inner，然后你就不需要指定 :focus 伪选择器了。这对我有用。

【讨论】：

我刚试过 "::-moz-focus-inneroutline:none;border:none;" 但它似乎没有用。您可以将 sn-p 复制到您的答案中尝试一下。

还有其他非标准 CSS 伪选择器您可以尝试：developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring 如果您正确格式化选择器，这些选择器的一些组合应该可以解决问题。例如，使用我原始答案中的选择器，您需要执行input::moz-focus-inner，然后删除所有轮廓和框阴影。这也是从上面指向选择器的链接：css-tricks.com/forums/topic/button-padding-issue.

【参考方案2】：

这似乎是不可能的。 This answer（以及紧随其后的那个）解释为什么这是不可能的。