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

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

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

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


当前回答

您可以使用按钮的焦点事件。 这适用于angular的情况

<button (focus)=false >Click</button

其他回答

你想要的是:

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

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

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

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

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

虽然很容易删除所有焦点按钮的轮廓(如user1933897的答案),但从可访问性的角度来看,这种解决方案是糟糕的(例如,参见停止破坏浏览器的默认焦点轮廓)。

另一方面,如果浏览器在你点击按钮后认为它是聚焦的,那么它可能不可能说服你停止将你点击的按钮样式设置为聚焦(我在看着你,OS X上的Chrome)。

那么,我们能做什么呢?我想到了几个选择。

1) Javascript (jQuery): $('.btn').mouseup(function() {this.blur()})

您正在指示浏览器在单击按钮后立即删除任何按钮周围的焦点。通过使用mouseup而不是点击,我们保持了基于键盘的交互的默认行为(mouseup不会被键盘触发)。

2) CSS: .btn:hover {outline: 0 !important}

在这里,您只关闭悬停按钮的轮廓。显然这不是理想的,但在某些情况下可能足够了。

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

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

HTML看起来像这样:

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

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

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

我添加

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

它的工作原理。