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

问题描述

点击它们后，我的按钮全部都有亮点。这是在Chrome中。

$ b $ $ b

 < button class =btn btn-primary btn-block> 
< span class =icon-plus>< / span>添加页面
< / button> 
  

我正在使用Bootstrap与主题，但我很确定那不是它：我注意到这之前在另一个项目上。

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

解决方案 div>

我在另一页上找到了这个Q和A，并且重写了按钮焦点样式。这个问题可能是针对Chrome的MacOS特有的。

  .btn：focus {
 outline：none; 
} 
  

请注意，这对可访问性有影响，直到您拥有为您的按钮和输入提供一致的良好状态。根据下面的评论，有那些不能使用鼠标的用户。

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>

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?

解决方案

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;
}

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屋！