CSS-如何删除按钮上的蓝色“选定”轮廓?

我有一些使用<button>的按钮,单击该按钮可获得蓝色选定的颜色!

有没有办法删除此功能?

Christoffer Jacobsen asked 2020-08-11T16:10:23Z
4个解决方案
74 votes

这是每个浏览器的默认行为; 您的浏览器似乎是Safari,在Google Chrome中为橙色!

使用此功能可消除此影响:

button {
  outline: none; // this one
}
Afzaal Ahmad Zeeshan answered 2020-08-11T16:10:33Z
13 votes

您可以使用outline: none删除蓝色轮廓。

但是,我强烈建议您也设置焦点状态的样式。 这是为了帮助有视觉障碍的用户。

签出:[http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible。]更多信息请参见:[http://outlinenone.com]

Sam answered 2020-08-11T16:11:03Z
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;}

但是,如果用户数量众多,那么您将无法使用鼠标或只想使用键盘来提高速度。

alexrogers answered 2020-08-11T16:12:05Z
1 votes

您可以通过在大纲中添加!important来删除它。

button{
 outline: none !important;
}
Justin Cedeno answered 2020-08-11T16:12:25Z
translate from https://stackoverflow.com:/questions/20593224/how-do-i-remove-blue-selected-outline-on-buttons