如何删除点击按钮周围的焦点

我的按钮都有一个高亮后，我点击他们。这是Chrome。

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

我正在使用带有主题的Bootstrap，但我非常确定这不是它:我以前在另一个项目中注意到这一点。

如果我使用<a>标签而不是<button>，它就会消失。为什么?如果我想使用<button>，我怎么让它消失呢?

当前回答

这样效果最好

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

其他回答

这样效果最好

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

这是工作，希望能帮到你

.btn:focus, .btn:focus:active {
    outline: none;
}

如果以上方法对你不起作用，试试下面的方法:

.btn:焦点{轮廓:无;框影:无;边框:2px实体透明;}

正如user1933897所指出的，这可能是针对MacOS和Chrome的。

这里有两种可能的解决方案。

1.）按钮类型=“按钮” 类名称=“btn-cart”onClick{（event）=>this.blur（event）}

2.)按钮类型="按钮" className="btn-cart" onclick={this.blur}

这两种解决方案都将删除按钮周围突出显示的部分即-> blur()有自己的规范，它删除突出显示的部分周围。

迟到了，但谁知道这也许能帮到谁呢。 CSS看起来像这样:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTML看起来像这样:

<button type="button" class="btn btn-primary rHighlight">Text</button>

这样你就可以保留btn和它相关的行为。

推荐文章