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

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

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

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


当前回答

另一种可能的解决方案是在用户单击按钮时使用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效果之前使用焦点事件删除它:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

这避免了在使用click事件时可以看到的闪烁。这确实限制了界面,并且您将无法选择按钮,但这在所有应用程序中都不是问题。

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

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

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

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

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

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

这应该避免!

.btn:focus {
  outline: none;
}

虽然这里提供的CSS解决方案有效,

对于任何喜欢使用Bootstrap 4方式的人,就像官方Bootstrap主题指南中建议的那样, 这应该会有帮助:

按你们的习惯。SCSS文件(参见上面的指南^),其中您添加了您的变量覆盖,添加以下变量来删除按钮的盒子阴影:

// import bootstrap's variables & functions to override them
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// override the variables you want (you can look them up in node_modules/bootstrap/scss/variables file, they're the ones that have the !default keyword at the end)
$btn-focus-box-shadow: none;

// option A: include all of Bootstrap (see the above guide for other options)
@import "node_modules/bootstrap/scss/bootstrap";

这对我很有用。

请注意,在bootstrap的变量文件中有许多变量用于box-shadow,也用于其他控件,所以如果你想使用它们和/或这个特定的变量不适合你,可能需要更多的研究。

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

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