我的按钮都有一个高亮后,我点击他们。这是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>,我怎么让它消失呢?
当前回答
对于解决方案中使用的AngularJS开发人员:
var element = $window.document.getElementById("export-button");
if (element){
element.blur();
}
记住注入$window。
其他回答
我也注意到了同样的情况,尽管这真的让我很恼火,但我相信没有合适的方法来处理这个问题。
我会建议反对所有其他的解决方案,因为它们完全杀死了按钮的可访问性,所以现在,当你点击按钮时,你不会得到预期的焦点。
这应该避免!
.btn:focus {
outline: none;
}
我在另一个页面上找到了这个问题和回答,覆盖按钮焦点样式对我有用。这个问题可能是Chrome的MacOS特有的。
.btn:focus {
outline: none;
box-shadow: none;
}
请注意,这对可访问性有影响,除非你的按钮和输入有一个良好的一致的焦点状态,否则不建议这样做。根据下面的评论,有些用户不能使用鼠标。
我很好奇为什么有人想要删除轮廓。就像许多人提到的,如果你删除大纲,就会有可访问性问题。使用屏幕阅读器等辅助技术的用户在访问网站/应用程序时需要知道重点在哪里。我知道按钮周围的蓝色会“搞砸”设计,但是,你可以用CSS改变颜色:
outline-color: your color hex here;
另一种编辑方法是在焦点上添加边框。
试试其中一个吧:
大纲:0; 或 大纲:0 px; 或 大纲:没有;
而且 (美元).trigger(“模糊”);
虽然很容易删除所有焦点按钮的轮廓(如user1933897的答案),但从可访问性的角度来看,这种解决方案是糟糕的(例如,参见停止破坏浏览器的默认焦点轮廓)。
另一方面,如果浏览器在你点击按钮后认为它是聚焦的,那么它可能不可能说服你停止将你点击的按钮样式设置为聚焦(我在看着你,OS X上的Chrome)。
那么,我们能做什么呢?我想到了几个选择。
1) Javascript (jQuery): $('.btn').mouseup(function() {this.blur()})
您正在指示浏览器在单击按钮后立即删除任何按钮周围的焦点。通过使用mouseup而不是点击,我们保持了基于键盘的交互的默认行为(mouseup不会被键盘触发)。
2) CSS: .btn:hover {outline: 0 !important}
在这里,您只关闭悬停按钮的轮廓。显然这不是理想的,但在某些情况下可能足够了。