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

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

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

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


当前回答

有点核,但这是我在Angular 9上工作的简单方法。使用与因果关系,因为它影响每个html元素。

*:focus {
  outline: 0 !important;
}

其他回答

我找到了解决办法。 当我们聚焦时,bootstrap使用box-shadow,所以我们只是禁用它(声誉不够,无法上传图像:)。

我添加

.btn:focus{
    box-shadow:none !important;
}

它的工作原理。

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

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

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

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

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

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

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

这是工作,希望能帮到你

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

我的理解是,焦点首先应用在onMouseDown事件之后,所以在onMouseDown中调用e.c preventdefault()可能是一个干净的解决方案,取决于你的需求。这当然是一个可访问性友好的解决方案,但显然它调整了鼠标点击的行为,这可能与您的web项目不兼容。

我目前正在使用这个解决方案(在一个反应引导项目中),我没有收到一个焦点闪烁或按钮点击后保留的焦点,但我仍然能够标签我的焦点和视觉上可视化相同按钮的焦点。