我在bootstrap上也遇到了同样的问题。我用轮廓和盒影来解决

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or 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;}

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

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

*{
outline: none;
}

or

*{
outline-style: none;
}

对于任何使用Bootstrap并有此问题的人来说，他们使用:active:focus以及仅仅:active和:focus，所以你需要:

element:active:focus {
    outline: 0;
}

希望能节省一些人的时间来解决这个问题，我敲了敲我的头，想知道为什么这么简单的事情不能工作。

如果您使用Bootstrap 4.1或其他版本，大多数解决方案将无法工作。在敲了很多脑袋之后，我发现你需要应用无影课程:

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

在这个问题的实例中，我必须指定box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}