我的按钮都有一个高亮后,我点击他们。这是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>,我怎么让它消失呢?
当前回答
这里有两种可能的解决方案。
1.) 按钮类型=“按钮” 类名称=“btn-cart”onClick{(event)=>this.blur(event)}
2.)按钮类型="按钮" className="btn-cart" onclick={this.blur}
这两种解决方案都将删除按钮周围突出显示的部分 即-> blur()有自己的规范,它删除突出显示的部分周围。
其他回答
如果你使用规则: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/
另一种可能的解决方案是在用户单击按钮时使用Javascript侦听器添加类,然后使用另一个侦听器集中删除该类。这保持了可访问性(可见的标签),同时也防止了Chrome的奇怪行为,认为一个按钮在点击时集中。
JS:
$('button').click(function(){
$(this).addClass('clicked');
});
$('button').focus(function(){
$(this).removeClass('clicked');
});
CSS:
button:focus {
outline: 1px dotted #000;
}
button.clicked {
outline: none;
}
完整的例子: https://jsfiddle.net/4bbb37fh/
将此添加到脚本中
$(document).ready(function() {
$('#addBtn').focus(function() {
this.blur();
});
});
对于想要一个纯css方式的人来说:
:focus:not(:focus-visible) { outline: none }
这也可以为链接等工作,和奖金,它保持键盘的可访问性。最后,它被不支持焦点可见的浏览器忽略
我很好奇为什么有人想要删除轮廓。就像许多人提到的,如果你删除大纲,就会有可访问性问题。使用屏幕阅读器等辅助技术的用户在访问网站/应用程序时需要知道重点在哪里。我知道按钮周围的蓝色会“搞砸”设计,但是,你可以用CSS改变颜色:
outline-color: your color hex here;
另一种编辑方法是在焦点上添加边框。