如何删除 React Bootstrap 中按钮的活动状态轮廓？答案

【问题标题】：How do I remove the outline for active state on a button in React Bootstrap?如何删除 React Bootstrap 中按钮的活动状态轮廓？
【发布时间】：2020-09-01 07:01:45
【问题描述】：

我试图在 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;
}

结果是一样的，当按钮被按住时，边框仍然出现。我可以做些什么来删除它？

【问题讨论】：

标签： css reactjs twitter-bootstrap react-bootstrap

【解决方案1】：

我建议不要这样做。悬停和焦点上的 CSS 轮廓有助于提高可访问性。请参阅以下帖子：Quick tip: Never remove CSS outlines 。

删除 CSS 中的轮廓会给使用键盘浏览网页的人带来问题。使用 CSS 规则 :focus { outline: none; } 删除对象上的轮廓会导致链接或控件可聚焦，但会删除键盘用户的任何可见焦点指示。删除它的方法，例如 onfocus="blur()" 会导致键盘用户无法与链接或控件进行交互。

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

设置轮廓样式
为元素本身设置样式
仅为鼠标用户移动轮廓，如果您确实必须这样做

【讨论】：

我知道不删除它的理由，但为什么我在浏览的任何网站上都没有看到该大纲？
哪些网站？我希望他们故意隐藏辅助功能，它们不是您想要模仿的网站。

【解决方案2】：

问题是如何完成。试图回答这个问题... 我在组件本身内这样做了。我想要一个完全混合按钮的按钮组，我不喜欢它。在组件本身中添加 style = { boxShadow: 'none' } 对我有用。

另外，我希望我的分组按钮分开 (mr-1) 并带有圆角 (borderRadius)。

<ButtonGroup>
    {stuffBtnList.map((value, index) => (
        <Button
            key={index}
            variant='primary'
            size='sm'
            className='mr-1'
            style = {{ borderRadius: '.2rem', boxShadow: 'none' }}
            onClick={() => setStuff(value)}
        >
            {value}
        </Button>
    ))}
    <DropdownButton
        title='Other'
        size='sm'
        variant='success'
        onSelect={(e) => setStuff(e)}
    >
        other.map((value, index) => (
            <Dropdown.Item key={index} eventKey={value}>
                {value}
            </Dropdown.Item>
        ))}
    </DropdownButton>
</ButtonGroup>

【讨论】：