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

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

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

解决可访问性问题的另一种方法是通过一点Javascript。感谢来自hackernoon的这篇深刻的博客文章:https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

这里的方法非常简单而有效:当人们开始使用tab键导航页面时添加一个类(当再次切换到鼠标时可选地删除它)。然后，您可以使用这个类来显示或不显示焦点轮廓。

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

不建议这样做，因为这会降低网站的可访问性;更多信息，请看这篇文章。

也就是说，如果你坚持，这个CSS应该工作:

button:focus {outline:0;}

查看它或JSFiddle: http://jsfiddle.net/u4pXu/

或者在这个片段中:

button.launch { background-color: #F9A300; border: none; height: 40px; padding: 5px 15px; color: #ffffff; font-size: 16px; font-weight: 300; margin-top: 10px; margin-right: 10px; } button.launch:hover { cursor: pointer; background-color: #FABD44; } button.launch { background-color: #F9A300; border: none; height: 40px; padding: 5px 15px; color: #ffffff; font-size: 16px; font-weight: 300; margin-top: 10px; margin-right: 10px; } button.launch:hover { cursor: pointer; background-color: #FABD44; } button.change { background-color: #F88F00; border: none; height: 40px; padding: 5px 15px; color: #ffffff; font-size: 16px; font-weight: 300; margin-top: 10px; margin-right: 10px; } button.change:hover { cursor: pointer; background-color: #F89900; } button:active { outline: none; border: none; } button:focus {outline:0;} <button class="launch">Launch with these ads</button> <button class="change">Change</button>

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

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}