CSS 如何删除 Firefox 在按钮和链接上的虚线轮廓？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/71074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove Firefox's dotted outline on BUTTONS as well as links?
提问by Edward Tanguay
I can make Firefox not display the ugly dotted focus outlines on linkswith this:
我可以让 Firefox 不在链接上显示丑陋的虚线焦点轮廓：
a:focus {
outline: none;
}
But how can I do this for <button>tags as well? When I do this:
但是我该如何为<button>标签做到这一点呢？当我这样做时：
button:focus {
outline: none;
}
the buttons still have the dotted focus outline when I click on them.
当我点击它们时，按钮仍然具有虚线焦点轮廓。
(and yes, I know this is a usability issue, but I would like to provide my own focus hints which are appropriate to the design instead of ugly grey dots)
（是的，我知道这是一个可用性问题，但我想提供适合设计的我自己的焦点提示，而不是丑陋的灰点）
回答by
button::-moz-focus-inner {
border: 0;
}
回答by Anderson Custódio
No need to define a selector.
无需定义选择器。
:focus {outline:none;}
::-moz-focus-inner {border:0;}
However, this violates accessibility best practices from the W3C. The outline is there to help those navigating with keyboards.
但是，这违反了 W3C 的可访问性最佳实践。大纲是为了帮助那些使用键盘导航的人。
回答by chinkchink
If you prefer to use CSS to get rid of the dotted outline:
如果您更喜欢使用 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;
}
回答by foxybagga
The below worked for me in case of LINKS, thought of sharing - in case someone is interested.
在链接的情况下，以下内容对我有用，想分享 - 如果有人感兴趣。
a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
}
Cheers!
干杯!
回答by blizzyx
:focus, :active {
outline: 0;
border: 0;
}
回答by Renato Carvalho
[Update] This solution doesn't work anymore. The solution that worked for me is this one https://stackoverflow.com/a/3844452/925560
[更新] 此解决方案不再有效。对我有用的解决方案是这个https://stackoverflow.com/a/3844452/925560
The answer marked as correct didn't work with Firefox 24.0.
标记为正确的答案不适用于 Firefox 24.0。
To remove Firefox's dotted outline on buttons and anchor tags I added the code below:
为了删除 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;
}
I found the solution here: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html
我在这里找到了解决方案：http: //aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html
回答by Vartox
Tried most of the answers here, but none of them worked for me. When I realized that I have to get rid of the blue outline on buttons on Chrome too, I found another solution. Remove blue border from css custom-styled button in Chrome
在这里尝试了大部分答案，但没有一个对我有用。当我意识到我也必须摆脱 Chrome 上按钮上的蓝色轮廓时，我找到了另一个解决方案。从 Chrome 中的 css 自定义样式按钮中删除蓝色边框
This code worked for me on Firefox version 30 on Windows 7. Perhaps it might help somebody else out there :)
这段代码在 Windows 7 上的 Firefox 30 版上对我有用。也许它可以帮助其他人:)
button:focus {outline:0 !important;}
回答by Vitaly Sharovatov
There's no way to remove these dotted focus in Firefox using CSS.
无法使用 CSS 在 Firefox 中移除这些虚线焦点。
If you have access to the computers where your webapplication works, go to about:config in Firefox and set browser.display.focus_ring_widthto 0. Then Firefox won't show any dotted borders at all.
如果您有权访问您的 web 应用程序运行的计算机，请转到 Firefox 中的 about:config 并将其设置browser.display.focus_ring_width为 0。那么 Firefox 将根本不会显示任何虚线边框。
The following bug explains the topic: https://bugzilla.mozilla.org/show_bug.cgi?id=74225
以下错误解释了该主题：https: //bugzilla.mozilla.org/show_bug.cgi?id=74225
回答by Shannon Hochkins
There is many solutions found on the web for this, many of which work, but to force this, so that absolutely nothing can highlight/focus once a use the following:
在网上找到了许多解决方案，其中许多有效，但要强制执行此操作，因此一旦使用以下内容，绝对没有任何东西可以突出显示/聚焦：
::-moz-focus-inner, :active, :focus {
outline:none;
border:0;
-moz-outline-style: none;
}
This just adds that little bit extra security & seals the deal!
这只是增加了一点额外的安全性并完成了交易！
回答by bob
This will get the range control:
这将获得范围控制：
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
input[type=range]::-moz-focus-outer {
border: 0;
}
From: Remove dotted outline from range input element in Firefox
