我的按钮都有一个高亮后,我点击他们。这是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看起来像这样:
.rhighlight{
outline: none !important;
box-shadow:none
}
HTML看起来像这样:
<button type="button" class="btn btn-primary rHighlight">Text</button>
这样你就可以保留btn和它相关的行为。
其他回答
.btn:focus,.btn:active, a{
outline: none !important;
box-shadow: none;
}
这个大纲:没有将工作的按钮和标签
风格
.not-focusable:focus {
outline: none;
box-shadow: none;
}
使用
<button class="btn btn-primary not-focusable">My Button</button>
如果您正在使用webkit浏览器(可能是与webkit供应商前缀兼容的浏览器),则该轮廓属于按钮的-webkit-focus-ring伪类。简单地设置它的轮廓为none:
*:-webkit-focus-ring {
outline: none;
}
Chrome就是这样一个webkit浏览器,这种效果也会发生在Linux上(不仅仅是macOS的事情,尽管一些Chrome风格只适用于macOS)
我也注意到了同样的情况,尽管这真的让我很恼火,但我相信没有合适的方法来处理这个问题。
我会建议反对所有其他的解决方案,因为它们完全杀死了按钮的可访问性,所以现在,当你点击按钮时,你不会得到预期的焦点。
这应该避免!
.btn:focus {
outline: none;
}
对于解决方案中使用的AngularJS开发人员:
var element = $window.document.getElementById("export-button");
if (element){
element.blur();
}
记住注入$window。