如何在React Bootstrap中删除按钮上处于活动状态的轮廓？

Question

我试图在React Bootstrap中单击按钮时删除按钮轮廓。我设法使用以下方法删除了轮廓：

.btn:focus, .btn:active {
  box-shadow: none;
}

但是这不能固定活动状态，如果按住该按钮，则轮廓仍然可见。我也尝试了此修复程序：

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

结果是相同的，按住按钮时边框仍会出现。有什么我可以删除的吗？

Answer 1

我建议您不要这样做。 CSS关于悬停和重点的概述往往有助于可访问性。请参阅以下帖子：Quick tip: Never remove CSS outlines 。

删除CSS中的轮廓会给人们使用键盘浏览网页带来麻烦。使用CSS规则：focus {outline：none; }删除对象上的轮廓会使链接或控件成为可聚焦的，但是会消除键盘用户对焦点的任何可见指示。诸如onfocus =“ blur（）”之类的删除方法会导致键盘用户无法与链接或控件进行交互。

本文提供了一些选项，以更易于访问的方式处理此问题：

1. 设置轮廓样式
2. 元素本身的样式
3. 如果确实是[[必须，请仅移动鼠标用户的轮廓]