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

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

这应该避免!

.btn:focus {
  outline: none;
}

这对我很管用。 我创建了一个自定义类，覆盖必要的CSS。

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

-webkit-box-shadow适用于Chrome和safari浏览器。

我找到了一个解决方案，只需在css代码中添加以下行。

button:focus { outline: none }

我没有找到不破坏易用性或颠覆功能的可靠答案。

也许结合一些会更好地发挥整体作用。

<h1
  onmousedown="this.style.outline='none';"
  onclick="this.blur(); runFn(this);"
  onmouseup="this.style.outline=null;"
>Hello</h1>

function runFn(thisElem){控制台.log(“你好”，thisElem);的

虽然很容易删除所有焦点按钮的轮廓(如user1933897的答案)，但从可访问性的角度来看，这种解决方案是糟糕的(例如，参见停止破坏浏览器的默认焦点轮廓)。

另一方面，如果浏览器在你点击按钮后认为它是聚焦的，那么它可能不可能说服你停止将你点击的按钮样式设置为聚焦(我在看着你，OS X上的Chrome)。

那么，我们能做什么呢?我想到了几个选择。

1) Javascript (jQuery): $('.btn').mouseup(function() {this.blur()})

您正在指示浏览器在单击按钮后立即删除任何按钮周围的焦点。通过使用mouseup而不是点击，我们保持了基于键盘的交互的默认行为(mouseup不会被键盘触发)。

2) CSS: .btn:hover {outline: 0 !important}

在这里，您只关闭悬停按钮的轮廓。显然这不是理想的，但在某些情况下可能足够了。

在CSS中添加这个:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}