我的按钮都有一个高亮后,我点击他们。这是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>,我怎么让它消失呢?
当前回答
.btn:focus,.btn:active, a{
outline: none !important;
box-shadow: none;
}
这个大纲:没有将工作的按钮和标签
其他回答
如果你使用规则:focus {outline: none;}来删除轮廓,则该链接或控件将是可聚焦的,但对于键盘用户没有焦点指示。使用onfocus="blur()"这样的JS删除它的方法更糟糕,会导致键盘用户无法与控件交互。
你可以使用的一些技巧,包括添加:focus {outline: none;}规则,并在检测到键盘交互时再次删除它们。林赛·埃文斯为此做了一个lib: https://github.com/lindsayevans/outline.js
但我更喜欢在html或body标签上设置一个类。并在CSS文件中控制何时使用它。
例如(内联事件处理程序仅用于演示目的):
<html>
<head>
<style>
a:focus, button:focus {
outline: 3px solid #000;
}
.no-focus a, .no-focus button {
outline: none;
}
</style>
</head>
<body id="thebody"
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
<p>This her is <a href="#">a link</a></p>
<button>Click me</button>
</body>
</html>
我确实整理了一个Pen: http://codepen.io/snobojohan/pen/RWXXmp
但要注意存在性能问题。这将强制用户每次在鼠标和键盘之间切换时重新绘制。更多关于避免不必要的油漆http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
我们遇到了类似的问题,并注意到Bootstrap 3 . 在他们的标签上没有问题(在Chrome中)。它看起来像他们使用的大纲风格,让浏览器决定什么是最好的,Chrome似乎做了你想要的:显示大纲时,聚焦,除非你只是点击元素。
对大纲样式的支持很难确定,因为浏览器要决定它的含义。最好检查几个浏览器,并有一个回退规则。
如果你想在鼠标下而不是键盘标签上完成轮廓的删除,并且你正在使用VueJS,下面是解决方案:
<button @mousedown="$event.preventDefault()">No Online On Click</button>
这基本上阻止它在点击时接收焦点,但任何其他接收焦点的方式都保持活跃。
可以设置tabIndex="-1"。它将使浏览器跳过此按钮时,你通过标签可聚焦控件。
其他“修复”建议这里,只删除焦点轮廓,但仍然留下按钮表。然而,从可用性的角度来看,你已经删除了辉光,所以你的用户不会知道当前聚焦的按钮是什么。
另一方面,使按钮非表格有可访问性的影响。
我用它来删除自举模式中的X按钮的焦点轮廓,在底部有重复的“关闭”按钮,所以我的解决方案对可访问性没有影响。
对于解决方案中使用的AngularJS开发人员:
var element = $window.document.getElementById("export-button");
if (element){
element.blur();
}
记住注入$window。