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

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

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

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

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

当前回答

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

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

其他回答

这样效果最好

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

如果button:focus {box-shadow: none}不适合你，可能会有一些库添加边界，就像我的例子中使用的伪选择器::after。

所以我用以下解决方案删除了显示在焦点上的边界:

button:focus::after {
    outline: none;
    box-shadow: none;
}

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

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

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

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

button:focus { outline: none }

这是工作，希望能帮到你

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

推荐文章