如何删除点击按钮周围的焦点

我的按钮都有一个高亮后，我点击他们。这是Chrome。

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

我正在使用带有主题的Bootstrap，但我非常确定这不是它:我以前在另一个项目中注意到这一点。

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

当前回答

这样效果最好

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

其他回答

我在另一个页面上找到了这个问题和回答，覆盖按钮焦点样式对我有用。这个问题可能是Chrome的MacOS特有的。

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

请注意，这对可访问性有影响，除非你的按钮和输入有一个良好的一致的焦点状态，否则不建议这样做。根据下面的评论，有些用户不能使用鼠标。

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

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

这是工作，希望能帮到你

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

您可以使用按钮的焦点事件。这适用于angular的情况

<button (focus)=false >Click</button

我有同样的问题使用<a>作为按钮，我发现我错过了一个工作区添加attr类型=“按钮”使它的行为正常为我至少。

推荐文章