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

这是每个浏览器的默认行为； 您的浏览器似乎是Safari，在Google Chrome中为橙色！

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

button {
  outline: none; // this one
}

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

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

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

这是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;}

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

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

button{
 outline: none !important;
}