如何删除 Firefox 在 BUTTONS 和链接上的虚线轮廓？答案

【问题标题】：How to remove Firefox's dotted outline on BUTTONS as well as links?如何删除 Firefox 在 BUTTONS 和链接上的虚线轮廓？
【发布时间】：2010-09-09 10:08:05
【问题描述】：

我可以让 Firefox 不在 links 上显示丑陋的虚线焦点轮廓：

a:focus { 
    outline: none; 
}

但是我怎样才能为<button> 标签做到这一点呢？当我这样做时：

button:focus { 
    outline: none; 
}

当我点击按钮时，它们仍然具有虚线焦点轮廓。

（是的，我知道这是一个可用性问题，但我想提供适合设计的我自己的焦点提示，而不是丑陋的灰点）

【问题讨论】：

似乎在 Firefox 4 中，默认情况下，元素在被点击时不再获得轮廓，但只有在获得键盘焦点时才会出现。
你所说的“丑陋”是为了支持网站的可访问性。删除此轮廓时，仅键盘用户无法再确定网站的哪个部分成为焦点。您的网站将完全无法访问，绝不应该是这种情况。切勿删除轮廓。更好地按照自己的方式设计。

标签： css firefox

【解决方案1】：

在 Firefox 中无法使用 CSS 移除这些点状焦点。

如果您可以访问您的 web 应用程序所在的计算机，请转到 Firefox 中的 about:config 并将 browser.display.focus_ring_width 设置为 0。然后 Firefox 将不会显示任何虚线边框。

以下错误解释了该主题：https://bugzilla.mozilla.org/show_bug.cgi?id=74225

【讨论】：

感谢它运行良好，但我之前创建了这么多链接，直到现在我才遇到这个问题。但是现在我很困惑，所以之前的原因是什么？
这个答案现在完全错误。如其他几个答案中提到的那样设置::-moz-focus-inner {border:0;} 效果很好。
@AndyM 这个答案确实有效。其他答案中提供的解决方案适用于 CSS，仅适用于单个网站。
问题是如何用 CSS 来完成，而答案说不能。那是错误的。可以的。

【解决方案2】：

看起来实现这一点的唯一方法是通过设置

browser.display.focus_ring_width = 0

在 about:config 中基于每个浏览器。

【讨论】：

【解决方案3】：

button::-moz-focus-inner {
  border: 0;
}

【讨论】：

是的，它也对我有用！现在如何为选择完成？
请注意，这也适用于输入（例如 input::-moz-focus-inner {border:0;}）
双冒号的用途：（CSS3 表示法）evotech.net/blog/2007/05/…
这个对我不起作用，因为 bootstrap.css 正在制作这个丑陋的虚线按钮。相反，我把:focus {outline:none !important;}
:focus {outline:none;} ::-moz-focus-inner {border:0;} 会不太具体

【解决方案4】：

你可能想要加强而不是摆脱它。

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue}

【讨论】：

@Nathan 有点晚了，但是在焦点状态下没有任何样式会影响键盘体验。当你按下 tab 键时，你将无法知道焦点是什么。
@Hkan 是的，我同意。但是 Firefox 的轮廓很难看，尤其是在自定义焦点边框周围时。
@Nathan 我完全同意这一点。我们应该做的是为焦点状态提供我们自己的样式，而不是使元素在所述状态上相同。

【解决方案5】：

我认为您应该通过移除焦点轮廓来真正了解自己在做什么，因为它可能会影响键盘导航和可访问性。

如果您因为设计问题需要将其删除，请在按钮上添加 :focus 状态，用其他视觉提示替换此状态，例如将边框更改为更亮的颜色或类似的东西。

有时我觉得有必要去掉那个烦人的轮廓，但我总是准备一个备用的焦点视觉提示。

并且从不使用blur() js 函数。使用::-moz-focus-inner 伪类。

【讨论】：

【解决方案6】：

如果你更喜欢使用 CSS 来摆脱虚线轮廓：

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

【讨论】：

对于零的数字不需要单位。 0px 可以替换为 0

【解决方案7】：

button::-moz-focus-inner { border: 0; }

button 可以是您想要禁用该行为的任何 CSS 选择器。

【讨论】：

【解决方案8】：

您可以在 CSS 中尝试button::-moz-focus-inner {border: 0px solid transparent;}。

【讨论】：

【解决方案9】：

:focus, :active {
    outline: 0;
    border: 0;
}

【讨论】：

这不够具体，我不想使用 !important 或仅定位 a 元素，所以我找到了一个不错的选择是 body :focus, body :active { outline: 0; border: 0; } ::-moz-focus-inner { border: 0; }

【解决方案10】：

无需定义选择器。

:focus {outline:none;}
::-moz-focus-inner {border:0;}

但是，这违反了 W3C 的可访问性最佳实践。大纲可以帮助那些使用键盘导航的人。

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

【讨论】：

谢谢，当正确答案没有时，这对我有用。我一定是用错了选择器。
谢谢你，这会在链接和按钮上删除它吗？
这个最好！接受的答案仅适用于<button>，不适用于<a>，也不适用于<input>
完美在 Ubuntu (GNU/Linux) 下的 Mozilla Firefox 30 中。
我将附上关于这种破坏性可访问性的说明。重要的是要记住，不是每个人都可以使用鼠标，或者看，或者看得很清楚。也就是说，根据链接（和常识）隐藏大纲只会在完成 without ... an author-supplied visual focus indicator 时打破 a11y - 换句话说，正如 OP 所提到的，用你自己的替换用户代理样式是可以的。理想情况下，它应该是高对比度的。

【解决方案11】：

如果您在按钮上有边框并且想要在 Firefox 中隐藏虚线轮廓而不移除边框（因此它是按钮上的额外宽度），您可以使用：

.button::-moz-focus-inner {
    border-color: transparent;
}

【讨论】：

【解决方案12】：

以下内容在 LINKS 的情况下对我有用，考虑分享 - 以防有人感兴趣。

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

干杯！

【讨论】：

只需a { outline: none; } 就足够了。
这里 !important 成功了，其他解决方案没有，也没有工作。对我来说。
但通常你应该使用a { outline: none; } 和!important -> a { outline: none !important; }

【解决方案13】：

为此在网上找到了许多解决方案，其中许多都有效，但要强制执行此操作，因此一旦使用以下内容，绝对没有任何东西可以突出/聚焦：

::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

这只是增加了一点额外的安全性并达成了交易！

【讨论】：

【解决方案14】：

[更新] 此解决方案不再有效。对我有用的解决方案是https://stackoverflow.com/a/3844452/925560

标记为正确的答案不适用于 Firefox 24.0。

为了移除 Firefox 在按钮和锚标签上的虚线轮廓，我添加了以下代码：

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

我在这里找到了解决方案：http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

【讨论】：

它不再工作了：/ 工作的解决方案是这个stackoverflow.com/a/3844452/925560

【解决方案15】：

从链接、按钮和输入元素中删除虚线轮廓。

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

【讨论】：

【解决方案16】：

这适用于 firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

【讨论】：

【解决方案17】：

在这里尝试了大多数答案，但没有一个对我有用。当我意识到我也必须摆脱 Chrome 上按钮上的蓝色轮廓时，我找到了另一种解决方案。 Remove blue border from css custom-styled button in Chrome

此代码在 Windows 7 上的 Firefox 版本 30 上为我工作。也许它可以帮助其他人:)

button:focus {outline:0 !important;}

【讨论】：

同样的事情，这是唯一适用于 FF 38.0.5 的解决方案
在 Firefox 81 for Linux Mint 上工作。

【解决方案18】：

在大多数情况下，如果不将 !important 添加到 CSS 代码中，它将不起作用。

所以，别忘了加`!important`

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

或任何其他代码：

button::-moz-focus-inner {
  border: 0 !important;
}

【讨论】：

【解决方案19】：

使用此代码在 Firefox 46 和 Chrome 49 上测试。

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

之前（白点可见）

之后（白点不可见）

如果您只想应用于少数输入字段、按钮等。请使用更具体的代码。

input[type=text] {
  outline: none !important;
}

【讨论】：

我需要 !important 来覆盖 Firefox 的样式表。干杯！

【解决方案20】：

在尝试了上面的许多选项之后，只有以下对我有用。

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

【讨论】：

实际上（至少在 Firefox 77 中），您只需要：button:focus { outline: none !important } 或者如果您喜欢我不喜欢 !important，这也可以覆盖 Firefox 样式：:root button:focus { outline: none }

【解决方案21】：

与 Bootstrap 3 一起，我使用了这段代码。第二组规则只是撤消 bootstrap 对焦点/活动按钮所做的操作：

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

请注意，您的自定义 css 文件应位于 html 代码中的 Bootstrap css 文件之后以覆盖它。

【讨论】：

【解决方案22】：

下面的 CSS 代码可以删除这个：

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

【讨论】：

【解决方案23】：

只需为选择框添加这个 css

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

这对我来说很好。

【讨论】：

【解决方案24】：

这将获得范围控制：

:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

发件人：Remove dotted outline from range input element in Firefox

【讨论】：

完美，也可以在 linux 上的 Firefox 72 中使用！

【解决方案25】：

是的，不要错过 !important

button::-moz-focus-inner {
 border: 0 !important;
}

【讨论】：

!important 不是这里答案的一部分，如果您的应用需要它，那么您需要解决的问题比按钮周围的突出显示要大。始终努力避免 !important。

所以，别忘了加!important

所以，别忘了加`!important`