如何在单击时消除按钮周围的焦点

Question

单击按钮后，我的按钮周围都有一个突出显示。这是在 Chrome 中。

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

我正在使用带有主题的 Bootstrap，但我很确定不是这样：我之前在另一个项目中注意到了这一点。

如果我使用 <a> 标签而不是 <button> ，它就会消失。为什么？如果我想使用 <button> 我该如何让它消失？

原文由 Sean Clark Hess 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在另一个页面上找到了这个 Q 和 A，覆盖按钮焦点样式对我有用。此问题可能特定于带有 Chrome 的 MacOS。

 .btn:focus {
  outline: none;
  box-shadow: none;
}

请注意，尽管这对可访问性有影响，并且在您的按钮和输入具有良好一致的焦点状态之前不建议这样做。根据下面的评论，有些用户不能使用鼠标。

原文由 jerimiah797 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你想要这样的东西：

 <button class="btn btn-primary btn-block" onclick="this.blur();">...

.blur() 方法正确地删除了焦点突出显示并且不会弄乱 Bootstraps 的样式。

原文由 cshotton 发布，翻译遵循 CC BY-SA 3.0 许可协议