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

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

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

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

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

当前回答

尝试这个解决方案删除按钮周围的边界。将此代码添加到css中。

Try

button:focus{
outline:0px;
}

如果不工作，然后使用下面。

button:focus{
 outline:none !important;
 }

其他回答

这样效果最好

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

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

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

记住注入$window。

我也注意到了同样的情况，尽管这真的让我很恼火，但我相信没有合适的方法来处理这个问题。

我会建议反对所有其他的解决方案，因为它们完全杀死了按钮的可访问性，所以现在，当你点击按钮时，你不会得到预期的焦点。

这应该避免!

.btn:focus {
  outline: none;
}

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

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

另一种可能的解决方案是在用户单击按钮时使用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/

推荐文章