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

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

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

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


当前回答

这是工作,希望能帮到你

.btn:focus, .btn:focus:active {
    outline: none;
}

其他回答

在CSS中添加这个:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

试试其中一个吧:

大纲:0; 或 大纲:0 px; 或 大纲:没有;

而且 (美元).trigger(“模糊”);

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

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

记住注入$window。

我在另一个页面上找到了这个问题和回答,覆盖按钮焦点样式对我有用。这个问题可能是Chrome的MacOS特有的。

.btn:focus {
  outline: none;
  box-shadow: none;
}

请注意,这对可访问性有影响,除非你的按钮和输入有一个良好的一致的焦点状态,否则不建议这样做。根据下面的评论,有些用户不能使用鼠标。

如果你想在鼠标下而不是键盘标签上完成轮廓的删除,并且你正在使用VueJS,下面是解决方案:

<button @mousedown="$event.preventDefault()">No Online On Click</button>

这基本上阻止它在点击时接收焦点,但任何其他接收焦点的方式都保持活跃。