CSS-如何删除按钮上的蓝色“选定”轮廓?
我有一些使用<button>
的按钮,单击该按钮可获得蓝色选定的颜色!
有没有办法删除此功能?
Christoffer Jacobsen asked 2020-08-11T16:10:23Z
4个解决方案
74 votes
这是每个浏览器的默认行为; 您的浏览器似乎是Safari,在Google Chrome中为橙色!
使用此功能可消除此影响:
button {
outline: none; // this one
}
13 votes
您可以使用outline: none
删除蓝色轮廓。
但是,我强烈建议您也设置焦点状态的样式。 这是为了帮助有视觉障碍的用户。
签出:[http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible。]更多信息请参见:[http://outlinenone.com]
3 votes
这是Chrome家族中的一个问题,并且一直存在。
提出了一个错误[https://bugs.chromium.org/p/chromium/issues/detail?id=904208]
可以在此处显示:[https://codepen.io/anon/pen/Jedvwj],只要在任何类似按钮的事物上添加边框(例如,将role =“ button”添加到标签中) 当您用鼠标单击时,会弄乱并设置焦点状态。 您应该仅在按键盘Tab键时才能看到该轮廓。
我强烈建议使用此修复程序:[https://github.com/wicg/focus-visible。]
只需执行以下操作
npm install --save focus-visible
将脚本添加到您的html中:
<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>
或使用webpack或类似方法导入到主条目文件中:
import 'focus-visible/dist/focus-visible.min';
然后把它放在你的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;
}
您可以设置:
button:focus {outline:0;}
但是,如果用户数量众多,那么您将无法使用鼠标或只想使用键盘来提高速度。
1 votes
您可以通过在大纲中添加!important来删除它。
button{
outline: none !important;
}