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

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

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

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

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

当前回答

对于想要一个纯css方式的人来说:

:focus:not(:focus-visible) { outline: none }

这也可以为链接等工作，和奖金，它保持键盘的可访问性。最后，它被不支持焦点可见的浏览器忽略

其他回答

对于想要一个纯css方式的人来说:

:focus:not(:focus-visible) { outline: none }

这也可以为链接等工作，和奖金，它保持键盘的可访问性。最后，它被不支持焦点可见的浏览器忽略

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

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

试试其中一个吧:

大纲:0; 或大纲:0 px; 或大纲:没有;

而且 (美元).trigger(“模糊”);

这里有两种可能的解决方案。

1.）按钮类型=“按钮” 类名称=“btn-cart”onClick{（event）=>this.blur（event）}

2.)按钮类型="按钮" className="btn-cart" onclick={this.blur}

这两种解决方案都将删除按钮周围突出显示的部分即-> blur()有自己的规范，它删除突出显示的部分周围。

对于sass用户，引导4应该通过重写变量来操作。

如果你想禁用按钮周围焦点上的框影:

$btn-focus-box-shadow: none;

你也可以禁用输入周围焦点上的框影:

$input-focus-box-shadow: none;

或者两者都有一个变量:

$input-btn-focus-box-shadow: none;

推荐文章