我的按钮都有一个高亮后，我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap，但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>，它就会消失。为什么?如果我想使用<button>，我怎么让它消失呢?
当前回答
这对我很管用。 我创建了一个自定义类，覆盖必要的CSS。
.custom-button:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
-webkit-box-shadow适用于Chrome和safari浏览器。
其他回答
真不敢相信居然没人贴出来。
使用标签而不是按钮。
<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>
小提琴
另一种可能的解决方案是在用户单击按钮时使用Javascript侦听器添加类，然后使用另一个侦听器集中删除该类。这保持了可访问性(可见的标签)，同时也防止了Chrome的奇怪行为，认为一个按钮在点击时集中。
JS:
$('button').click(function(){
$(this).addClass('clicked');
});
$('button').focus(function(){
$(this).removeClass('clicked');
});
CSS:
button:focus {
outline: 1px dotted #000;
}
button.clicked {
outline: none;
}
完整的例子: https://jsfiddle.net/4bbb37fh/
我在上面的评论中提到了这一点，但为了清晰起见，有必要把它作为一个单独的答案列出。只要你不需要在按钮上设置焦点，你可以在它应用任何CSS效果之前使用焦点事件删除它:
$('buttonSelector').focus(function(event) {
event.target.blur();
});
这避免了在使用click事件时可以看到的闪烁。这确实限制了界面，并且您将无法选择按钮，但这在所有应用程序中都不是问题。
我没有找到不破坏易用性或颠覆功能的可靠答案。
也许结合一些会更好地发挥整体作用。
<h1
onmousedown="this.style.outline='none';"
onclick="this.blur(); runFn(this);"
onmouseup="this.style.outline=null;"
>Hello</h1>
function runFn(thisElem){控制台.log(“你好”，thisElem);的
这是工作，希望能帮到你
.btn:focus, .btn:focus:active {
outline: none;
}
