这样效果最好

.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;
     }

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

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

例子:

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

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

可以设置tabIndex="-1"。它将使浏览器跳过此按钮时，你通过标签可聚焦控件。

其他“修复”建议这里，只删除焦点轮廓，但仍然留下按钮表。然而，从可用性的角度来看，你已经删除了辉光，所以你的用户不会知道当前聚焦的按钮是什么。

另一方面，使按钮非表格有可访问性的影响。

我用它来删除自举模式中的X按钮的焦点轮廓，在底部有重复的“关闭”按钮，所以我的解决方案对可访问性没有影响。

如果你想在鼠标下而不是键盘标签上完成轮廓的删除，并且你正在使用VueJS，下面是解决方案:

<button @mousedown="$event.preventDefault()">No Online On Click</button>

这基本上阻止它在点击时接收焦点，但任何其他接收焦点的方式都保持活跃。

试试其中一个吧:

大纲:0; 或 大纲:0 px; 或 大纲:没有;

而且 (美元).trigger(“模糊”);