如何实现点击Button打开Modal后，Button不显示点击态边框样式

问题 #

免责声明：我此前从未接触过CSS，这是第一次处理样式相关的前端任务，若存在概念误解、术语使用错误等情况还请谅解。
我有一个点击后会打开Modal的测试按钮，初始状态如图(1)所示：

点击后弹出Modal时，按钮会变成图(2)所示的状态：

可以看到点击后按钮出现了边框，看起来类似长按选中的效果。而Modal打开后我点击页面任意位置，按钮就会变成图(3)所示的状态，此时没有图(2)中的边框：

这是基础的button组件代码：

<button className={`btn position-relative  ${className}`} onClick={onClick}>
...
</button>

调用该组件打开Modal的代码如下：

<Button onClick={() => setModal(true)} className={'btn btn-primary mr-2'}>
  (info icon)
</Button>

请问如何实现点击初始状态(1)的按钮后，按钮直接呈现(3)的状态，不会出现(2)的点击态边框？ #

解决方案 #

你看到的边框是按钮获得焦点后的默认样式，点击按钮时按钮会默认获得焦点，所以显示了该边框；点击页面其他位置后按钮失去焦点，边框就会消失。可以通过下面两种方案解决：

方案1：通过CSS移除聚焦样式 #

如果是用Bootstrap的btn组件，默认聚焦状态同时有outline和box-shadow两个样式控制边框/阴影，给按钮加自定义CSS即可：

• 如果只想修改这个特定按钮的样式，先给按钮加自定义类名no-focus-outline：

<Button onClick={() => setModal(true)} className={'btn btn-primary mr-2 no-focus-outline'}>
  (info icon)
</Button>

然后添加对应的CSS规则：

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

• 如果要全局修改所有btn按钮的聚焦样式，直接修改btn类的样式即可：

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

方案2：点击后主动让按钮失焦 #

修改点击事件逻辑，触发点击后主动让当前按钮失去焦点，就不会保留聚焦样式：

<Button onClick={(e) => {
  e.target.blur();
  setModal(true);
}} className={'btn btn-primary mr-2'}>
  (info icon)
</Button>

小提示：如果你的站点需要支持高可访问性，不建议全局移除focus样式，会影响依赖键盘导航的用户识别当前聚焦位置，仅内部使用或无键盘导航需求的场景可以直接使用上述方案。 #

内容的提问来源于stack exchange，提问作者anthino12