我的按钮都有一个高亮后,我点击他们。这是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。
其他回答
我很好奇为什么有人想要删除轮廓。就像许多人提到的,如果你删除大纲,就会有可访问性问题。使用屏幕阅读器等辅助技术的用户在访问网站/应用程序时需要知道重点在哪里。我知道按钮周围的蓝色会“搞砸”设计,但是,你可以用CSS改变颜色:
outline-color: your color hex here;
另一种编辑方法是在焦点上添加边框。
可以设置tabIndex="-1"。它将使浏览器跳过此按钮时,你通过标签可聚焦控件。
其他“修复”建议这里,只删除焦点轮廓,但仍然留下按钮表。然而,从可用性的角度来看,你已经删除了辉光,所以你的用户不会知道当前聚焦的按钮是什么。
另一方面,使按钮非表格有可访问性的影响。
我用它来删除自举模式中的X按钮的焦点轮廓,在底部有重复的“关闭”按钮,所以我的解决方案对可访问性没有影响。
我在另一个页面上找到了这个问题和回答,覆盖按钮焦点样式对我有用。这个问题可能是Chrome的MacOS特有的。
.btn:focus {
outline: none;
box-shadow: none;
}
请注意,这对可访问性有影响,除非你的按钮和输入有一个良好的一致的焦点状态,否则不建议这样做。根据下面的评论,有些用户不能使用鼠标。
对于想要一个纯css方式的人来说:
:focus:not(:focus-visible) { outline: none }
这也可以为链接等工作,和奖金,它保持键盘的可访问性。最后,它被不支持焦点可见的浏览器忽略
这里有两种可能的解决方案。
1.) 按钮类型=“按钮” 类名称=“btn-cart”onClick{(event)=>this.blur(event)}
2.)按钮类型="按钮" className="btn-cart" onclick={this.blur}
这两种解决方案都将删除按钮周围突出显示的部分 即-> blur()有自己的规范,它删除突出显示的部分周围。