如何删除点击按钮周围的焦点

我的按钮都有一个高亮后，我点击他们。这是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

其他回答

可以设置tabIndex="-1"。它将使浏览器跳过此按钮时，你通过标签可聚焦控件。

其他“修复”建议这里，只删除焦点轮廓，但仍然留下按钮表。然而，从可用性的角度来看，你已经删除了辉光，所以你的用户不会知道当前聚焦的按钮是什么。

另一方面，使按钮非表格有可访问性的影响。

我用它来删除自举模式中的X按钮的焦点轮廓，在底部有重复的“关闭”按钮，所以我的解决方案对可访问性没有影响。

直接在HTML标签中(在您可能想要在设计的其他地方留下引导主题的场景中)..

尝试的例子..

<button style="border: transparent;">

<button style="border: 1px solid black;">

. .等。这取决于你想要的效果。

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

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

记住注入$window。

  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

这个大纲:没有将工作的按钮和标签

对于想要一个纯css方式的人来说:

:focus:not(:focus-visible) { outline: none }

这也可以为链接等工作，和奖金，它保持键盘的可访问性。最后，它被不支持焦点可见的浏览器忽略

推荐文章