logo标签列表

如何去除Firefox中按钮和链接的虚线轮廓？

cssfirefox
524

我可以用以下代码让 Firefox 不显示链接的丑陋虚线聚焦轮廓：

 a:focus {
   outline: none;
}


 a:focus {
   outline: none;
}

a:focus { 
    outline: none; 
}

但是我怎么才能对 <button> 标签进行同样的操作呢？当我这样做时：

button:focus { 
    outline: none; 
}

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

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

2
在Firefox 4中，似乎元素在被点击时不再默认显示轮廓，而只有在接收到键盘焦点时才会显示。 - Geert
3
您所谓的“丑陋”是为了支持网站的可访问性。移除这个轮廓时，只使用键盘的用户无法确定网站的哪个部分处于焦点状态。如果完全移除这个轮廓，您的网站将无法访问，这绝不能发生。千万不要移除这个轮廓，最好以您自己的方式进行样式设计。 - Markus Graf
25个回答
815
button::-moz-focus-inner {
  border: 0;
}
16
是的，这对我也有效！现在如何对选择框进行操作？ - 7wp
16
请注意，这也适用于输入（例如，input::-moz-focus-inner {border:0;}） - El Yobo
15
双冒号的用途：（CSS3 符号）http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/双冒号符号是 CSS3 中用于区分伪元素和伪类的标记，用于向文档添加特定的样式。在 CSS2 中，单冒号符号被用于表示伪元素和伪类，但在 CSS3 中，双冒号符号被引入来明确区分它们。使用双冒号符号可以提高代码的可读性和可维护性。 - sholsinger
27
这个对我没用，因为bootstrap.css让按钮变得丑陋带有虚线边框。相反，我加了:focus {outline:none !important;}来去掉虚线边框。 - machineaddict
5
:focus {outline:none;} ::-moz-focus-inner {border:0;} 这段代码可以更简洁，意思不变。 - Ben
显示剩余13条评论
329
9
谢谢，这个方法对我有效，而正确答案却没有用。我一定是使用了错误的选择器。 - irl_irl
3
这个最好！被认可的答案只针对于 <button>，而不适用于 <a> 或 <input>。 - Ron van der Heijden
很棒的答案，正如Bondye所说，这适用于所有东西而不仅仅是<button>。 - eclipsis
2
在Ubuntu（GNU/Linux）下的Mozilla Firefox 30中完美运行。 - e-info128
4
我会翻译以下内容：我支持有关这会破坏可访问性的注释。要记住并不是每个人都能使用鼠标，或者看得见，或者视力良好。话虽如此，根据链接（和常识），只有在没有“由作者提供的视觉焦点指示器”的情况下隐藏大纲才会破坏可访问性，换句话说，用你自己的样式替换用户代理样式是可以的，就像OP提到的那样。理想情况下，它应该是高对比度的。 - johncip
显示剩余6条评论
50
如果您希望使用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; 
    }
您不需要一个关于零的数字单位。0px可以直接替换为0。 - slang
44

以下方法适用于链接，对我有帮助，想分享一下给需要的人。

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

干杯！

12
对于链接而言，简单地使用 a { outline: none; } 就足够了。 - grant
3
在这里，!important 起到了关键作用，其他解决方案没有使用它，对我来说就无法生效。 - Cristiano Fontes
但通常你应该使用 a { outline: none; } 与 !important -> a { outline: none !important; }。 - joryl
23
:focus, :active {
    outline: 0;
    border: 0;
}
1
这不够具体，我也不想使用!important或仅针对a元素进行目标设置，所以我发现一个好的选择是 body :focus, body :active { outline: 0; border: 0; } ::-moz-focus-inner { border: 0; } - Ivan Durst
9
[更新] 此解决方案不再有效。对我有用的解决方案是此链接： https://dev59.com/rHVD5IYBdhLWcg3wJIEK#3844452 标记为正确答案的答案在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。该链接提供了如何去除Firefox浏览器中按钮和锚标签的虚线轮廓的CSS代码。
2
它不再工作了:/ 工作的解决方案是这个 https://dev59.com/rHVD5IYBdhLWcg3wJIEK#3844452 - Renato Carvalho
9

尝试了这里大部分的答案，但都没能解决我的问题。当我意识到我也需要在Chrome浏览器上去除按钮的蓝色轮廓时，我找到了另一个解决方案。 从Chrome中删除CSS自定义样式按钮的蓝色边框

这段代码对我在Windows 7上的Firefox版本30有效。或许它可以帮助其他人 :)

button:focus {outline:0 !important;}
同样的事情在这里，这是唯一在FF 38.0.5上有效的解决方案。 - OlivierH
在Linux Mint上使用Firefox 81进行了开发。 - Sr. Schneider
7
完美，也在Linux上的Firefox 72中运行！ - asdjfiasd
6

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

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

之前（可见白点）

有白点的输入框

之后（白点不可见） 输入框没有白点

如果你只想应用于一些特定的输入框、按钮等，请使用更具体的代码。

input[type=text] {
  outline: none !important;
}
!important 是必须的，这样我才能覆盖 Firefox 的样式表。干杯！ - Sam A. Horvath-Hunt
尝试了以上所有解决方案，但都没有起作用，直到我看到了这个解决方案 - 谢谢。 - rob
6

在网络上有很多解决此问题的方案，其中许多都可以工作，但为了强制实现这一点，使得一旦使用以下内容绝对无法突出/聚焦：

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

这只是添加了额外的安全性，并且使它更加可靠！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接