关于CSS：如何删除按钮上的Firefox点缀以及链接？

我可以使Firefox在此链接上不显示点状的丑陋焦点：

但是我该怎么做标签呢？ 当我这样做时：

1 2 3

button:focus {     outline: none; }

单击这些按钮时，它们的焦点轮廓仍为虚线。

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

---

1 2 3

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

---

无需定义选择器。

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

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

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

---

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

1 2 3 4 5 6 7 8 9 10

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

---

以下是在我想使用LINKS(共享)的情况下为我工作的方式(如果有人感兴趣)。

1 2 3

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

干杯!

---

1 2 3 4

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

---

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

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

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

1 2 3 4 5 6 7 8 9 10

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版本上对我有用。也许它可以对其他人有所帮助:)

1	button:focus {outline:0 !important;}

---

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

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

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

---

在网络上可以找到许多解决方案，其中许多工作有效，但是要强制这样做，因此一旦使用以下命令，绝对没有任何内容可以突出显示/聚焦：

1 2 3 4 5

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

这只会增加一点点额外的安全性并达成协议！

---

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

1 2 3

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

之前(可见白点)

之后(白点不可见)

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

1 2 3

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

快乐编码！

---

只需为选择框添加此CSS

1 2 3 4

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

这对我来说很好。

---

在大多数情况下，如果不将!important添加到CSS代码中，它将无法正常工作。

因此，不要忘记添加!important

1 2 3

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

或任何其他代码：

1 2 3

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

---

如果您在按钮上有边框，并且想在Firefox中隐藏虚线轮廓而不删除边框(因此按钮上有多余的宽度)，则可以使用：

1 2 3

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

---

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

1	browser.display.focus_ring_width = 0

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

---

这将得到范围控制：

1 2 3 4 5 6 7 8 9

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

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

---

您可能需要加强重点而不是摆脱重点。

1 2 3

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

---

我认为您应该通过删除焦点轮廓来真正了解自己在做什么，因为它可能会使键盘导航和辅助功能变得混乱。

如果由于设计问题需要将其取出，请在按钮上添加:focus状态，以其他视觉提示替换该状态，例如将边框更改为较亮的颜色或类似的颜色。

有时，我觉得有必要将烦人的轮廓删除，但我总是准备备用焦点视觉提示。

永远不要使用blur() js函数。使用::-moz-focus-inner伪类。

---

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

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

---

以下CSS代码可消除此问题：

1 2 3 4 5 6 7 8 9 10

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

---

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

1 2 3 4 5 6 7 8

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

---

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

---

在尝试了上述多种选择之后，以下仅对我有用。

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

---

是的，不要错过！重要

1 2 3

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

---

这适用于Firefox v-27.0

1 2 3

.buttonClassName:focus {   outline:none; }

---

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

1 2 3 4 5 6 7

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

---