521

我可以使 Firefox 不在链接上显示丑陋的虚线焦点轮廓:

a:focus { 
    outline: none; 
}

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

button:focus { 
    outline: none; 
}

当我单击它们时,这些按钮仍然具有虚线焦点轮廓。

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

4

25 回答 25

813
button::-moz-focus-inner {
  border: 0;
}
于 2008-10-13T22:46:06.417 回答
326

无需定义选择器。

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

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

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

于 2010-10-02T05:01:35.350 回答
49

如果您更喜欢使用 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; 
    }
于 2009-10-25T23:00:13.397 回答
44

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

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

干杯!

于 2011-10-02T18:22:18.693 回答
23
:focus, :active {
    outline: 0;
    border: 0;
}
于 2010-06-27T23:11:36.207 回答
9

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

于 2013-09-24T22:17:13.137 回答
9

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

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

button:focus {outline:0 !important;}
于 2014-07-16T21:54:28.000 回答
8

这将获得范围控制:

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

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

于 2017-11-09T06:19:31.740 回答
6

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

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

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

于 2008-09-16T11:06:36.020 回答
6

在网上找到了许多解决方案,其中许多都有效,但要强制这样做,因此一旦使用以下内容,绝对没有任何东西可以突出/聚焦:

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

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

于 2013-03-25T05:19:14.003 回答
5

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

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

之前(白点可见)

带白点的输入

之后(白点不可见) 在此处输入图像描述

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

input[type=text] {
  outline: none !important;
}
于 2016-04-27T17:57:39.187 回答
5

只需为选择框添加此 css

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

这对我来说很好。

于 2017-01-13T09:42:22.817 回答
4

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

如果您因为设计问题需要将其取出,:focus请向按钮添加一个状态,用其他一些视觉提示替换它,例如将边框更改为更亮的颜色或类似的东西。

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

并且永远不要使用blur()js 功能。使用::-moz-focus-inner伪类。

于 2009-07-08T01:04:55.223 回答
4

在大多数情况下,如果不添加!importantCSS 代码,它将无法正常工作。

所以,不要忘记添加!important

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


或任何其他代码:

button::-moz-focus-inner {
  border: 0 !important;
}
于 2015-08-08T13:23:47.560 回答
3

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

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

button:focus::-moz-focus-inner {border-color: blue} 
于 2009-05-13T11:12:03.823 回答
3
button::-moz-focus-inner { border: 0; }

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

于 2009-11-17T17:31:19.230 回答
3

如果您在按钮上有边框并且想要在 Firefox 中隐藏虚线轮廓而不删除边框(因此它是按钮上的额外宽度),您可以使用:

.button::-moz-focus-inner {
    border-color: transparent;
}
于 2011-07-09T13:38:31.520 回答
3

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

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;
}
于 2013-12-22T16:14:42.130 回答
3

下面的 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;
}
于 2016-08-04T11:38:07.143 回答
2

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

browser.display.focus_ring_width = 0

在 about:config 每个浏览器的基础上。

于 2008-09-16T11:08:03.270 回答
1

这适用于 Firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}
于 2013-12-30T04:47:16.373 回答
1

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

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}
于 2016-05-27T11:15:44.933 回答
1

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

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

于 2016-06-09T05:24:30.833 回答
1

是的,不要错过!重要

button::-moz-focus-inner {
 border: 0 !important;
}
于 2019-03-30T17:36:13.957 回答
0

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

于 2010-01-07T16:19:02.377 回答