我的按钮都有一个高亮后,我点击他们。这是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>,我怎么让它消失呢?
当前回答
我没有找到不破坏易用性或颠覆功能的可靠答案。
也许结合一些会更好地发挥整体作用。
<h1
onmousedown="this.style.outline='none';"
onclick="this.blur(); runFn(this);"
onmouseup="this.style.outline=null;"
>Hello</h1>
function runFn(thisElem){控制台.log(“你好”,thisElem);的
其他回答
虽然很容易删除所有焦点按钮的轮廓(如user1933897的答案),但从可访问性的角度来看,这种解决方案是糟糕的(例如,参见停止破坏浏览器的默认焦点轮廓)。
另一方面,如果浏览器在你点击按钮后认为它是聚焦的,那么它可能不可能说服你停止将你点击的按钮样式设置为聚焦(我在看着你,OS X上的Chrome)。
那么,我们能做什么呢?我想到了几个选择。
1) Javascript (jQuery): $('.btn').mouseup(function() {this.blur()})
您正在指示浏览器在单击按钮后立即删除任何按钮周围的焦点。通过使用mouseup而不是点击,我们保持了基于键盘的交互的默认行为(mouseup不会被键盘触发)。
2) CSS: .btn:hover {outline: 0 !important}
在这里,您只关闭悬停按钮的轮廓。显然这不是理想的,但在某些情况下可能足够了。
我也注意到了同样的情况,尽管这真的让我很恼火,但我相信没有合适的方法来处理这个问题。
我会建议反对所有其他的解决方案,因为它们完全杀死了按钮的可访问性,所以现在,当你点击按钮时,你不会得到预期的焦点。
这应该避免!
.btn:focus {
outline: none;
}
我刚刚在MacOS和Chrome上使用按钮触发“转换”事件时遇到了同样的问题。如果阅读本文的人已经在使用事件监听器,您可以通过在操作之后调用.blur()来解决这个问题。
例子:
nextQuestionButtonEl.click(function(){
if (isQuestionAnswered()) {
currentQuestion++;
changeQuestion();
} else {
toggleNotification("invalidForm");
}
this.blur();
});
不过,如果您还没有使用事件侦听器,添加一个事件侦听器来解决这个问题可能会增加不必要的开销,像前面的回答提供的样式解决方案会更好。
对于任何使用react-bootstrap并遇到此问题的人,以下是我所做的工作:
.btn:focus {
/* the !important is really the key here, it overrides everything else */
outline: none !important;
box-shadow: none !important;
}
在添加!之前,事情并没有工作。
真不敢相信居然没人贴出来。
使用标签而不是按钮。
<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>
小提琴