删除按钮上的蓝色“选定”轮廓

Question

我有一些使用<button>的按钮，点击后会得到一个蓝色的颜色！

有没有办法删除此功能？

Answer 1

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

使用此功能删除此效果：

button {
  outline: none; // this one
}

Answer 2

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

但是，我强烈建议您设置焦点状态。这是为了帮助视力受损的用户。

结帐：http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible。更多阅读：http://outlinenone.com

Answer 3

这是Chrome家族中的一个问题，并且一直存在。

已引发错误https://bugs.chromium.org/p/chromium/issues/detail?id=904208

可以在此处显示：https://codepen.io/anon/pen/Jedvwj只要在类似按钮的任何事物上添加边框（例如，将role =“ button”添加到标签中），Chrome就会混乱并设置焦点状态当您用鼠标单击时。您应该仅在按键盘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;}

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

Answer 4

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

button{
 outline: none !important;
}