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

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

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

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

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

当前回答

如果你不想要按钮的轮廓和所有的状态，你可以用下面的代码覆盖css

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

其他回答

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

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

这应该避免!

.btn:focus {
  outline: 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/

我很好奇为什么有人想要删除轮廓。就像许多人提到的，如果你删除大纲，就会有可访问性问题。使用屏幕阅读器等辅助技术的用户在访问网站/应用程序时需要知道重点在哪里。我知道按钮周围的蓝色会“搞砸”设计，但是，你可以用CSS改变颜色:

outline-color: your color hex here;

另一种编辑方法是在焦点上添加边框。

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

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

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

如果您正在使用webkit浏览器(可能是与webkit供应商前缀兼容的浏览器)，则该轮廓属于按钮的-webkit-focus-ring伪类。简单地设置它的轮廓为none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome就是这样一个webkit浏览器，这种效果也会发生在Linux上(不仅仅是macOS的事情，尽管一些Chrome风格只适用于macOS)

推荐文章