如何删除 Firefox 按钮和链接上的虚线轮廓？

https://stackoverflow.com/questions/71074

css
firefox

09-06-2019
|

题

我可以让 Firefox 不显示丑陋的虚线焦点轮廓链接有了这个：

a:focus { 
    outline: none; 
}

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

button:focus { 
    outline: none; 
}

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

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

解决方案

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

其他提示

无需定义选择器。

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

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

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

如果您更喜欢使用 CSS 来消除虚线轮廓：

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

下面的内容对我有用，如果有链接，想分享——如果有人感兴趣的话。

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

干杯!

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

[更新] 该解决方案不再有效。对我有用的解决方案是这个 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

尝试了这里的大部分答案，但没有一个对我有用。当我意识到我也必须去掉 Chrome 上按钮上的蓝色轮廓时，我找到了另一个解决方案。从 Chrome 中的 css 自定义样式按钮中删除蓝色边框

这段代码适用于 Windows 7 上的 Firefox 版本 30。也许它可能对其他人有帮助:)

button:focus {outline:0 !important;}

在 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, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

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

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

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

前（可见白点）

后（白点是看不见的）

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

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

快乐编码！

大多数情况下无需添加 !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;
}

只需为选择框添加此 css

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

这对我来说效果很好。

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

browser.display.focus_ring_width = 0

在每个浏览器的 about:config 中。

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

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

您可能想加强焦点而不是摆脱它。

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

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

我认为您应该通过删除焦点轮廓真正知道自己在做什么，因为它可能会扰乱键盘导航和可访问性。

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

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

和绝不使用 blur() js 函数。使用 ::-moz-focus-inner 伪类。

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

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

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

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

下面的 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;
}

这将获得范围控制：

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

从：从 Firefox 中的范围输入元素中删除虚线轮廓

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

这适用于 Firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

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

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

我与 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 文件之后以覆盖它。

是的，不要错过 ！重要的

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

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow

如何删除 Firefox 按钮和链接上的虚线轮廓？

所以，不要忘记添加 !important

所以，不要忘记添加 `!important`