我的按钮都有一个高亮后,我点击他们。这是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>,我怎么让它消失呢?
当前回答
试试其中一个吧:
大纲:0; 或 大纲:0 px; 或 大纲:没有;
而且 (美元).trigger(“模糊”);
其他回答
如果以上方法对你不起作用,试试下面的方法:
.btn:焦点{轮廓:无;框影:无;边框:2px实体 透明;}
正如user1933897所指出的,这可能是针对MacOS和Chrome的。
如果你使用规则: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/
我在另一个页面上找到了这个问题和回答,覆盖按钮焦点样式对我有用。这个问题可能是Chrome的MacOS特有的。
.btn:focus {
outline: none;
box-shadow: none;
}
请注意,这对可访问性有影响,除非你的按钮和输入有一个良好的一致的焦点状态,否则不建议这样做。根据下面的评论,有些用户不能使用鼠标。
如果您正在使用webkit浏览器(可能是与webkit供应商前缀兼容的浏览器),则该轮廓属于按钮的-webkit-focus-ring伪类。简单地设置它的轮廓为none:
*:-webkit-focus-ring {
outline: none;
}
Chrome就是这样一个webkit浏览器,这种效果也会发生在Linux上(不仅仅是macOS的事情,尽管一些Chrome风格只适用于macOS)
我在上面的评论中提到了这一点,但为了清晰起见,有必要把它作为一个单独的答案列出。只要你不需要在按钮上设置焦点,你可以在它应用任何CSS效果之前使用焦点事件删除它:
$('buttonSelector').focus(function(event) {
event.target.blur();
});
这避免了在使用click事件时可以看到的闪烁。这确实限制了界面,并且您将无法选择按钮,但这在所有应用程序中都不是问题。