我的按钮都有一个高亮后，我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap，但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>，它就会消失。为什么?如果我想使用<button>，我怎么让它消失呢?
当前回答
在CSS中添加这个:
*, ::after, ::before {
box-sizing: border-box;
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
其他回答
这里有两种可能的解决方案。
1.） 按钮类型=“按钮” 类名称=“btn-cart”onClick{（event）=>this.blur（event）}
2.)按钮类型="按钮" className="btn-cart" onclick={this.blur}
这两种解决方案都将删除按钮周围突出显示的部分 即-> blur()有自己的规范，它删除突出显示的部分周围。
虽然很容易删除所有焦点按钮的轮廓(如user1933897的答案)，但从可访问性的角度来看，这种解决方案是糟糕的(例如，参见停止破坏浏览器的默认焦点轮廓)。
另一方面，如果浏览器在你点击按钮后认为它是聚焦的，那么它可能不可能说服你停止将你点击的按钮样式设置为聚焦(我在看着你，OS X上的Chrome)。
那么，我们能做什么呢?我想到了几个选择。
1) Javascript (jQuery): $('.btn').mouseup(function() {this.blur()})
您正在指示浏览器在单击按钮后立即删除任何按钮周围的焦点。通过使用mouseup而不是点击，我们保持了基于键盘的交互的默认行为(mouseup不会被键盘触发)。
2) CSS: .btn:hover {outline: 0 !important}
在这里，您只关闭悬停按钮的轮廓。显然这不是理想的，但在某些情况下可能足够了。
对于解决方案中使用的AngularJS开发人员:
var element = $window.document.getElementById("export-button");
if (element){
element.blur();
}
记住注入$window。
风格
.not-focusable:focus {
outline: none;
box-shadow: none;
}
使用
<button class="btn btn-primary not-focusable">My Button</button>
.btn:focus,.btn:active, a{
outline: none !important;
box-shadow: none;
}
这个大纲:没有将工作的按钮和标签
