我的按钮都有一个高亮后,我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?
我的按钮都有一个高亮后,我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?
当前回答
我的理解是,焦点首先应用在onMouseDown事件之后,所以在onMouseDown中调用e.c preventdefault()可能是一个干净的解决方案,取决于你的需求。这当然是一个可访问性友好的解决方案,但显然它调整了鼠标点击的行为,这可能与您的web项目不兼容。
我目前正在使用这个解决方案(在一个反应引导项目中),我没有收到一个焦点闪烁或按钮点击后保留的焦点,但我仍然能够标签我的焦点和视觉上可视化相同按钮的焦点。
其他回答
虽然这里提供的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,也用于其他控件,所以如果你想使用它们和/或这个特定的变量不适合你,可能需要更多的研究。
我的理解是,焦点首先应用在onMouseDown事件之后,所以在onMouseDown中调用e.c preventdefault()可能是一个干净的解决方案,取决于你的需求。这当然是一个可访问性友好的解决方案,但显然它调整了鼠标点击的行为,这可能与您的web项目不兼容。
我目前正在使用这个解决方案(在一个反应引导项目中),我没有收到一个焦点闪烁或按钮点击后保留的焦点,但我仍然能够标签我的焦点和视觉上可视化相同按钮的焦点。
虽然很容易删除所有焦点按钮的轮廓(如user1933897的答案),但从可访问性的角度来看,这种解决方案是糟糕的(例如,参见停止破坏浏览器的默认焦点轮廓)。
另一方面,如果浏览器在你点击按钮后认为它是聚焦的,那么它可能不可能说服你停止将你点击的按钮样式设置为聚焦(我在看着你,OS X上的Chrome)。
那么,我们能做什么呢?我想到了几个选择。
1) Javascript (jQuery): $('.btn').mouseup(function() {this.blur()})
您正在指示浏览器在单击按钮后立即删除任何按钮周围的焦点。通过使用mouseup而不是点击,我们保持了基于键盘的交互的默认行为(mouseup不会被键盘触发)。
2) CSS: .btn:hover {outline: 0 !important}
在这里,您只关闭悬停按钮的轮廓。显然这不是理想的,但在某些情况下可能足够了。
对于任何使用react-bootstrap并遇到此问题的人,以下是我所做的工作:
.btn:focus {
/* the !important is really the key here, it overrides everything else */
outline: none !important;
box-shadow: none !important;
}
在添加!之前,事情并没有工作。
我在上面的评论中提到了这一点,但为了清晰起见,有必要把它作为一个单独的答案列出。只要你不需要在按钮上设置焦点,你可以在它应用任何CSS效果之前使用焦点事件删除它:
$('buttonSelector').focus(function(event) {
event.target.blur();
});
这避免了在使用click事件时可以看到的闪烁。这确实限制了界面,并且您将无法选择按钮,但这在所有应用程序中都不是问题。