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

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

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

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

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

当前回答

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

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

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

其他回答

直接在HTML标签中(在您可能想要在设计的其他地方留下引导主题的场景中)..

尝试的例子..

<button style="border: transparent;">

<button style="border: 1px solid black;">

. .等。这取决于你想要的效果。

对于想要一个纯css方式的人来说:

:focus:not(:focus-visible) { outline: none }

这也可以为链接等工作，和奖金，它保持键盘的可访问性。最后，它被不支持焦点可见的浏览器忽略

我的理解是，焦点首先应用在onMouseDown事件之后，所以在onMouseDown中调用e.c preventdefault()可能是一个干净的解决方案，取决于你的需求。这当然是一个可访问性友好的解决方案，但显然它调整了鼠标点击的行为，这可能与您的web项目不兼容。

我目前正在使用这个解决方案(在一个反应引导项目中)，我没有收到一个焦点闪烁或按钮点击后保留的焦点，但我仍然能够标签我的焦点和视觉上可视化相同按钮的焦点。

真不敢相信居然没人贴出来。

使用标签而不是按钮。

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

小提琴

我在上面的评论中提到了这一点，但为了清晰起见，有必要把它作为一个单独的答案列出。只要你不需要在按钮上设置焦点，你可以在它应用任何CSS效果之前使用焦点事件删除它:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

这避免了在使用click事件时可以看到的闪烁。这确实限制了界面，并且您将无法选择按钮，但这在所有应用程序中都不是问题。

推荐文章