我的按钮都有一个高亮后,我点击他们。这是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>,我怎么让它消失呢?
当前回答
尝试这个解决方案删除按钮周围的边界。将此代码添加到css中。
Try
button:focus{
outline:0px;
}
如果不工作,然后使用下面。
button:focus{
outline:none !important;
}
其他回答
如果以上方法对你不起作用,试试下面的方法:
.btn:焦点{轮廓:无;框影:无;边框:2px实体 透明;}
正如user1933897所指出的,这可能是针对MacOS和Chrome的。
你想要的是:
<button class="btn btn-primary btn-block" onclick="this.blur();">...
.blur()方法正确地删除了焦点高亮显示,并且不会弄乱bootstrap的样式。
这对我很管用。 我创建了一个自定义类,覆盖必要的CSS。
.custom-button:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
-webkit-box-shadow适用于Chrome和safari浏览器。
尝试这个解决方案删除按钮周围的边界。将此代码添加到css中。
Try
button:focus{
outline:0px;
}
如果不工作,然后使用下面。
button:focus{
outline:none !important;
}
我刚刚在MacOS和Chrome上使用按钮触发“转换”事件时遇到了同样的问题。如果阅读本文的人已经在使用事件监听器,您可以通过在操作之后调用.blur()来解决这个问题。
例子:
nextQuestionButtonEl.click(function(){
if (isQuestionAnswered()) {
currentQuestion++;
changeQuestion();
} else {
toggleNotification("invalidForm");
}
this.blur();
});
不过,如果您还没有使用事件侦听器,添加一个事件侦听器来解决这个问题可能会增加不必要的开销,像前面的回答提供的样式解决方案会更好。