可以用这个:

:active {
    outline:none;
}

如果那也不管用的话:

:active {
   outline:none !important;
}

这适用于我(FF和Chrome，至少)。不要以:focus状态为目标，只需以:active状态为目标，当用户单击链接时，这将删除浏览器中美观的突出显示。但是当一个有残疾标签或shift-tab的用户浏览一个页面时，它仍然会保留焦点状态。双方都很高兴。：）

要删除蓝色背景的水龙头，我使用

button {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

将其添加到CSS文件中。

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

对所有有蓝色边框问题的元素尝试此代码

*{
outline: none;
}

or

*{
outline-style: none;
}

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

一个错误已经提出https://bugs.chromium.org/p/chromium/issues/detail?id=904208

它可以显示在这里:https://codepen.io/anon/pen/Jedvwj只要你添加一个边界的任何按钮一样(说role="button"已添加到一个标签为例)Chrome混乱和设置焦点状态，当你点击鼠标。

我强烈推荐使用这个修复程序: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;}

但如果你有大量的用户，你就会对那些不能使用鼠标或只想用键盘提高速度的用户不利。

删除大纲对于可访问性是非常糟糕的!理想情况下，焦点环只在用户想要使用键盘时才会显示。

用途:focus-visible。它目前是W3C提议的使用CSS样式化仅用于键盘的焦点，并在Firefox (caniuse)中得到支持。在其他主要浏览器支持它之前，您可以使用这个健壮的填充。

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

我还写了一篇更详细的文章，以防你需要更多信息。