我的按钮都有一个高亮后,我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?
我的按钮都有一个高亮后,我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?
当前回答
对于任何使用react-bootstrap并遇到此问题的人,以下是我所做的工作:
.btn:focus {
/* the !important is really the key here, it overrides everything else */
outline: none !important;
box-shadow: none !important;
}
在添加!之前,事情并没有工作。
其他回答
这对我来说是可行的,另一个没有提到的解决方案。只要把它扔在点击事件…
$(this).trigger("blur");
或者从另一个事件/方法调用它…
$(".btn_name").trigger("blur");
我在上面的评论中提到了这一点,但为了清晰起见,有必要把它作为一个单独的答案列出。只要你不需要在按钮上设置焦点,你可以在它应用任何CSS效果之前使用焦点事件删除它:
$('buttonSelector').focus(function(event) {
event.target.blur();
});
这避免了在使用click事件时可以看到的闪烁。这确实限制了界面,并且您将无法选择按钮,但这在所有应用程序中都不是问题。
.btn:focus:active {
outline: none;
}
这将在点击时删除轮廓,但在点击时保持焦点(对于a11y)
这是工作,希望能帮到你
.btn:focus, .btn:focus:active {
outline: none;
}
这里有两种可能的解决方案。
1.) 按钮类型=“按钮” 类名称=“btn-cart”onClick{(event)=>this.blur(event)}
2.)按钮类型="按钮" className="btn-cart" onclick={this.blur}
这两种解决方案都将删除按钮周围突出显示的部分 即-> blur()有自己的规范,它删除突出显示的部分周围。