CSS 如何删除按钮上的蓝色“选定”轮廓？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20593224/
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 do I remove blue "selected" outline on buttons?
提问by Christoffer Jacobsen
I have some buttons using <button>, which when clicked get a blue selected color!
我有一些使用 的按钮<button>，点击后会选择蓝色！
Is there a way to remove this feature?
有没有办法去掉这个功能？
回答by Afzaal Ahmad Zeeshan
That is a default behaviour of each browser; your browser seems to be Safari, in Google Chrome it is orange in color!
这是每个浏览器的默认行为；您的浏览器似乎是 Safari，在 Google Chrome 中它是橙色的！
Use this to remove this effect:
使用它来消除此效果：
button {
outline: none; // this one
}
回答by Sam
You can remove the blue outline by using outline: none.
您可以使用 删除蓝色轮廓outline: none。
However, I would highly recommend styling your focus states too. This is to help users who are visually impaired.
但是，我也强烈建议您设置焦点状态的样式。这是为了帮助视力受损的用户。
Check out: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible. More reading here: http://outlinenone.com
查看：http: //www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible。更多阅读在这里：http: //outlinenone.com
回答by alexrogers
This is an issue in the Chrome family and has been there forever.
这是 Chrome 系列中的一个问题，并且一直存在。
A bug has been raised https://bugs.chromium.org/p/chromium/issues/detail?id=904208
已提出错误https://bugs.chromium.org/p/chromium/issues/detail?id=904208
It can be shown here: https://codepen.io/anon/pen/Jedvwjas soon as you add a border to anything button-like (say role="button" has been added to a tag for example) Chrome messes up and sets the focus state when you click with your mouse. You should see that outline only on keyboard tab-press.
它可以在此处显示：https: //codepen.io/anon/pen/Jedvwj只要您向任何类似按钮的内容添加边框（例如，role="button" 已添加到标签中）Chrome 就会搞砸并在您单击鼠标时设置焦点状态。您应该只在键盘 Tab-press 上看到该轮廓。
I highly recommend using this fix: https://github.com/wicg/focus-visible.
我强烈建议使用此修复程序：https: //github.com/wicg/focus-visible。
Just do the following
只需执行以下操作
npm install --save focus-visible
Add the script to your html:
将脚本添加到您的 html：
<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>
or import into your main entry file if using webpack or something similar:
或者如果使用 webpack 或类似的东西导入到你的主入口文件中：
import 'focus-visible/dist/focus-visible.min';
then put this in your css file:
然后把它放在你的css文件中：
// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
outline: magenta auto 5px;
}
You canjust set:
你可以只设置：
button:focus {outline:0;}
but if you have a large number of users, you're disadvantaging those who cannot use mice or those who just want to use their keyboard for speed.
但是，如果您拥有大量用户，那么您就会对那些不能使用鼠标或只想使用键盘以提高速度的人不利。
回答by Justin Cedeno
You can remove this by adding !important to your outline.
您可以通过在大纲中添加 !important 来删除它。
button{
outline: none !important;
}
