.btn:focus:active {
  outline: none;
}

这将在点击时删除轮廓，但在点击时保持焦点(对于a11y)

如果button:focus {box-shadow: none}不适合你，可能会有一些库添加边界，就像我的例子中使用的伪选择器::after。

所以我用以下解决方案删除了显示在焦点上的边界:

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

我也注意到了同样的情况，尽管这真的让我很恼火，但我相信没有合适的方法来处理这个问题。

我会建议反对所有其他的解决方案，因为它们完全杀死了按钮的可访问性，所以现在，当你点击按钮时，你不会得到预期的焦点。

这应该避免!

.btn:focus {
  outline: none;
}

真不敢相信居然没人贴出来。

使用标签而不是按钮。

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

小提琴

对于任何使用react-bootstrap并遇到此问题的人，以下是我所做的工作:

.btn:focus {
    /* the !important is really the key here, it overrides everything else */
    outline: none !important;
    box-shadow: none !important;
}

在添加!之前，事情并没有工作。

另一种可能的解决方案是在用户单击按钮时使用Javascript侦听器添加类，然后使用另一个侦听器集中删除该类。这保持了可访问性(可见的标签)，同时也防止了Chrome的奇怪行为，认为一个按钮在点击时集中。

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

完整的例子: https://jsfiddle.net/4bbb37fh/