我的按钮都有一个高亮后,我点击他们。这是Chrome。

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。

如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?


当前回答

我也注意到了同样的情况,尽管这真的让我很恼火,但我相信没有合适的方法来处理这个问题。

我会建议反对所有其他的解决方案,因为它们完全杀死了按钮的可访问性,所以现在,当你点击按钮时,你不会得到预期的焦点。

这应该避免!

.btn:focus {
  outline: none;
}

其他回答

如果您正在使用webkit浏览器(可能是与webkit供应商前缀兼容的浏览器),则该轮廓属于按钮的-webkit-focus-ring伪类。简单地设置它的轮廓为none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome就是这样一个webkit浏览器,这种效果也会发生在Linux上(不仅仅是macOS的事情,尽管一些Chrome风格只适用于macOS)

如果你想在鼠标下而不是键盘标签上完成轮廓的删除,并且你正在使用VueJS,下面是解决方案:

<button @mousedown="$event.preventDefault()">No Online On Click</button>

这基本上阻止它在点击时接收焦点,但任何其他接收焦点的方式都保持活跃。

如果你不想要按钮的轮廓和所有的状态,你可以用下面的代码覆盖css

.btn.active.focus, .btn.active:focus, 
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus{
  outline: none;
}

我没有找到不破坏易用性或颠覆功能的可靠答案。

也许结合一些会更好地发挥整体作用。

<h1
  onmousedown="this.style.outline='none';"
  onclick="this.blur(); runFn(this);"
  onmouseup="this.style.outline=null;"
>Hello</h1>

function runFn(thisElem){控制台.log(“你好”,thisElem);的

真不敢相信居然没人贴出来。

使用标签而不是按钮。

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

小提琴