如何删除点击按钮周围的焦点

我的按钮都有一个高亮后，我点击他们。这是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()有自己的规范，它删除突出显示的部分周围。

其他回答

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

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

虽然很容易删除所有焦点按钮的轮廓(如user1933897的答案)，但从可访问性的角度来看，这种解决方案是糟糕的(例如，参见停止破坏浏览器的默认焦点轮廓)。

另一方面，如果浏览器在你点击按钮后认为它是聚焦的，那么它可能不可能说服你停止将你点击的按钮样式设置为聚焦(我在看着你，OS X上的Chrome)。

那么，我们能做什么呢?我想到了几个选择。

1) Javascript (jQuery): $('.btn').mouseup(function() {this.blur()})

您正在指示浏览器在单击按钮后立即删除任何按钮周围的焦点。通过使用mouseup而不是点击，我们保持了基于键盘的交互的默认行为(mouseup不会被键盘触发)。

2) CSS: .btn:hover {outline: 0 !important}

在这里，您只关闭悬停按钮的轮廓。显然这不是理想的，但在某些情况下可能足够了。

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

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

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

我在另一个页面上找到了这个问题和回答，覆盖按钮焦点样式对我有用。这个问题可能是Chrome的MacOS特有的。

.btn:focus {
  outline: none;
  box-shadow: none;
}

请注意，这对可访问性有影响，除非你的按钮和输入有一个良好的一致的焦点状态，否则不建议这样做。根据下面的评论，有些用户不能使用鼠标。

如果以上方法对你不起作用，试试下面的方法:

.btn:焦点{轮廓:无;框影:无;边框:2px实体透明;}

正如user1933897所指出的，这可能是针对MacOS和Chrome的。

推荐文章