我的按钮都有一个高亮后，我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap，但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>，它就会消失。为什么?如果我想使用<button>，我怎么让它消失呢?
当前回答
你想要的是:
<button class="btn btn-primary btn-block" onclick="this.blur();">...
.blur()方法正确地删除了焦点高亮显示，并且不会弄乱bootstrap的样式。
其他回答
对于想要一个纯css方式的人来说:
:focus:not(:focus-visible) { outline: none }
这也可以为链接等工作，和奖金，它保持键盘的可访问性。最后，它被不支持焦点可见的浏览器忽略
我也注意到了同样的情况，尽管这真的让我很恼火，但我相信没有合适的方法来处理这个问题。
我会建议反对所有其他的解决方案，因为它们完全杀死了按钮的可访问性，所以现在，当你点击按钮时，你不会得到预期的焦点。
这应该避免!
.btn:focus {
outline: none;
}
如果以上方法对你不起作用，试试下面的方法:
.btn:焦点{轮廓:无;框影:无;边框:2px实体 透明;}
正如user1933897所指出的，这可能是针对MacOS和Chrome的。
在CSS中添加这个:
*, ::after, ::before {
box-sizing: border-box;
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
你想要的是:
<button class="btn btn-primary btn-block" onclick="this.blur();">...
.blur()方法正确地删除了焦点高亮显示，并且不会弄乱bootstrap的样式。
