Css 如何删除Firefox'；按钮和链接上的虚线轮廓是什么？

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

a:focus{
大纲：无；
}

但是我怎样才能对

标记也这样做呢？当我这样做时：

按钮：焦点{
大纲：无；
}

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

---

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

在Firefox中使用CSS无法删除这些虚线焦点

如果您可以访问Web应用程序工作的计算机，请转到Firefox中的about:config并将

browser.display.focus\u ring\u width

设置为0。那么Firefox将不会显示任何虚线边框

---

下面的bug解释了这个主题：

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

browser.display.focus_ring_width = 0

在“关于：基于每个浏览器的配置”中。

按钮：：-moz焦点内部{
边界：0；
}

您可能希望加强关注，而不是摆脱它

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

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

---

我认为你应该通过删除焦点轮廓来真正了解你在做什么，因为它会把键盘导航和可访问性搞得一团糟

如果由于设计问题需要将其取出，请在按钮上添加一个

：focus

状态，该状态将替换为其他视觉提示，如将边框更改为更亮的颜色或类似的内容

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

---

并且永远不要使用

blur（）

js函数。使用

：：-moz focus internal

伪类。

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

FireFox的

/**/
输入[type=“submit”]：：-moz焦点内部，输入[type=“button”]：：-moz焦点内部
{   
边界：0；
} 
/*适用于IE8及以下版本*/
输入[type=“submit”]：焦点，输入[type=“button”]：焦点
{     
大纲：无；
}

---

其中，

按钮

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

您可以尝试在CSS中使用

按钮：：-moz-focus-inner{border:0px solid transparent；}

。

焦点：：active{
大纲：0；
边界：0；
}

无需定义选择器

：焦点{大纲：无；}
：-moz焦点内部{border:0；}

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

---

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

。按钮：：-moz焦点内部{
边框颜色：透明；
}

下面的内容对我来说很有用，如果有人感兴趣，我想分享一下

a，a:已访问，a:焦点，a:活动，a:悬停{
大纲：0无！重要；
}

---

干杯

网络上有很多解决方案，其中很多都有效，但要强制这样做，一旦使用以下方法，绝对没有什么可以突出显示/聚焦：

：：-moz焦点内部，：活动，：焦点{
大纲：无；
边界：0；
-moz轮廓样式：无；
}

---

这只是增加了一点点额外的安全性&使交易成功

[Update]此解决方案不再有效。对我有效的解决方案是这个

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

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

a:焦点，a:活动，
按钮：：-moz焦点内部，
输入[type=“reset”]：-moz焦点内部，
输入[type=“button”]：-moz焦点内部，
输入[type=“submit”]：-moz焦点内部，
选择：：-moz焦点内部，
输入[type=“file”]>input[type=“button”]：：-moz焦点内部{
边界：0；
大纲：0；
}

---

我在这里找到了解决方案：

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

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上按钮的蓝色轮廓时，我找到了另一个解决方案

这段代码在Windows7上的Firefox版本30上对我有效。也许它可以帮助其他人：）

按钮：焦点{大纲：0！重要；}

在大多数情况下，不添加

！重要信息

对于CSS代码，它将不起作用

因此，不要忘记添加

！重要信息

或任何其他代码：

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

---

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

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

之前（白点可见）

之后（白点不可见）

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

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

---

快乐编码

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

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

---

除了bootstrap3之外，我还使用了这段代码。第二组规则只是撤销引导对焦点/活动按钮所做的操作：

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

---

发件人：

是的，不要错过！重要信息

按钮：：-moz焦点内部{
边界：0！重要；
}

是的，它对我也有用！现在，如何对selects执行此操作？请注意，这也适用于输入（例如，input:：-moz focus internal{border:0；}）双冒号的用途：（CSS3表示法）这一个对我不起作用，因为bootstrap.css正在制作这个丑陋的虚线按钮。相反，我把

：focus{outline:none！important；}

：focus{outline:none；}:：-moz-focus放在了一个

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