我刚刚在MacOS和Chrome上使用按钮触发“转换”事件时遇到了同样的问题。如果阅读本文的人已经在使用事件监听器，您可以通过在操作之后调用.blur()来解决这个问题。

例子:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

不过，如果您还没有使用事件侦听器，添加一个事件侦听器来解决这个问题可能会增加不必要的开销，像前面的回答提供的样式解决方案会更好。

这样效果最好

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

这个大纲:没有将工作的按钮和标签

我们遇到了类似的问题，并注意到Bootstrap 3 . 在他们的标签上没有问题(在Chrome中)。它看起来像他们使用的大纲风格，让浏览器决定什么是最好的，Chrome似乎做了你想要的:显示大纲时，聚焦，除非你只是点击元素。

对大纲样式的支持很难确定，因为浏览器要决定它的含义。最好检查几个浏览器，并有一个回退规则。

如果以上方法对你不起作用，试试下面的方法:

.btn:焦点{轮廓:无;框影:无;边框:2px实体 透明;}

正如user1933897所指出的，这可能是针对MacOS和Chrome的。

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

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

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