如何删除Firefox's虚线轮廓按钮以及链接?

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

如果你可以访问你的web应用程序工作的计算机，在Firefox中进入about:config并将browser.display.focus_ring_width设置为0。然后Firefox将不会显示任何虚线边界。

下面的错误解释了这个主题

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

browser.display.focus_ring_width = 0

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

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

你可能想要加强注意力，而不是摆脱它。

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


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

我认为你应该知道你移除焦点轮廓是在做什么，因为它会破坏键盘导航和可访问性。

如果你因为设计问题需要把它去掉，添加一个:focus状态到按钮中，用一些其他的视觉提示替换它，比如，将边框更改为更亮的颜色或类似的东西。

有时我觉得有必要把烦人的轮廓去掉，但我总是准备一个替代焦点视觉线索。

而从来没有使用blur() js函数。使用::-moz-focus-inner伪类。

如果你更喜欢使用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;
}

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

其中button可以是你想要禁用行为的任何CSS选择器。

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

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

不需要定义选择器。

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

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

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

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

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

下面的链接为我工作的情况下，想到分享-如果有人感兴趣。

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

干杯!

网络上有很多解决方案，其中很多都是有效的，但为了做到这一点，你可以使用以下方法:

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

这只是增加了一点额外的安全性&一言为定!

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

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

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 v-27.0

 .buttonClassName:focus {
outline:none;
}

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

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

button:focus {outline:0 !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;
}

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

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

之前(白点可见)

后(白点是不可见的) < / p >

如果你想只应用在几个输入字段，按钮等。使用更具体的代码。

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

在尝试了以上的许多选择后，只有以下几种对我有用。

*: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代码中的引导css文件之后来覆盖它。

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

简单地添加这个css选择框

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

这对我来说很有效。

这将得到范围控制:

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

来自:在Firefox中从范围输入元素中删除点轮廓

是的，不要错过重要的!

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