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

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

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

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


当前回答

我们遇到了类似的问题,并注意到Bootstrap 3 . 在他们的标签上没有问题(在Chrome中)。它看起来像他们使用的大纲风格,让浏览器决定什么是最好的,Chrome似乎做了你想要的:显示大纲时,聚焦,除非你只是点击元素。

对大纲样式的支持很难确定,因为浏览器要决定它的含义。最好检查几个浏览器,并有一个回退规则。

其他回答

这对我来说是可行的,另一个没有提到的解决方案。只要把它扔在点击事件…

$(this).trigger("blur");

或者从另一个事件/方法调用它…

$(".btn_name").trigger("blur");

这对我很管用。 我创建了一个自定义类,覆盖必要的CSS。

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

-webkit-box-shadow适用于Chrome和safari浏览器。

你想要的是:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

.blur()方法正确地删除了焦点高亮显示,并且不会弄乱bootstrap的样式。

我找到了解决办法。 当我们聚焦时,bootstrap使用box-shadow,所以我们只是禁用它(声誉不够,无法上传图像:)。

我添加

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

它的工作原理。

对于解决方案中使用的AngularJS开发人员:

var element = $window.document.getElementById("export-button");
    if (element){
        element.blur();
    }

记住注入$window。