如何在单击时移除按钮周围的焦点 [英] How to remove focus around buttons on click

问题描述

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

My buttons all have a highlight around them after I click them. This is in Chrome.

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

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

I am using Bootstrap with a theme, but I'm pretty sure that's not it: I was noticing this before on another project.

如果我使用 标签而不是 ，它就会消失.为什么?如果我想使用 我该如何让它消失?

It goes away if I use an <a> tag instead of <button>. Why? If I wanted to use <button> how would I make it go away?

推荐答案

我在另一个页面上发现了这个 Q 和 A，并且覆盖按钮焦点样式对我有用.此问题可能是 MacOS 和 Chrome 特有的.

I found this Q and A on another page, and overriding the button focus style worked for me. This problem may be specific to MacOS with Chrome.

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

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

Note though that this has implications for accessibility and isn't advised until you have a good consistent focus state for your buttons and inputs. As per the comments below, there are users out there who cannot use mice.

这篇关于如何在单击时移除按钮周围的焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！