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

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

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

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


当前回答

我刚刚在MacOS和Chrome上使用按钮触发“转换”事件时遇到了同样的问题。如果阅读本文的人已经在使用事件监听器,您可以通过在操作之后调用.blur()来解决这个问题。

例子:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

不过,如果您还没有使用事件侦听器,添加一个事件侦听器来解决这个问题可能会增加不必要的开销,像前面的回答提供的样式解决方案会更好。

其他回答

有点核,但这是我在Angular 9上工作的简单方法。使用与因果关系,因为它影响每个html元素。

*:focus {
  outline: 0 !important;
}

另一种可能的解决方案是在用户单击按钮时使用Javascript侦听器添加类,然后使用另一个侦听器集中删除该类。这保持了可访问性(可见的标签),同时也防止了Chrome的奇怪行为,认为一个按钮在点击时集中。

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

完整的例子: https://jsfiddle.net/4bbb37fh/

如果button:focus {box-shadow: none}不适合你,可能会有一些库添加边界,就像我的例子中使用的伪选择器::after。

所以我用以下解决方案删除了显示在焦点上的边界:

button:focus::after {
    outline: none;
    box-shadow: none;
}

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

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

记住注入$window。

我找到了一个解决方案,只需在css代码中添加以下行。

button:focus { outline: none }