CSS自定义:focus样式后点击按钮焦点残留，如何恢复默认行为？

不需要编写JavaScript代码，使用原生CSS的:focus-visible伪类即可实现预期效果，交互逻辑和浏览器原生默认焦点行为完全一致。

问题根源 #

你之前为:focus伪类定义的样式会命中所有场景下的焦点状态：无论焦点是鼠标点击元素触发，还是用户按TAB键通过键盘导航触发，都会应用你写的阴影样式。点击按钮后焦点默认会停留在当前交互元素上，因此样式会持续显示，直到你点击空白处把焦点转移走。

修复后的代码 #

将原有选择器中的:focus替换为:focus-visible即可：

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.5rem rgba(61, 112, 46, 0.5);
}

.cta *:focus-visible {
  box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.5);
}

效果说明 #

• 仅当用户通过键盘（TAB、方向键等）切换焦点时，才会显示自定义的焦点样式
• 鼠标点击按钮、链接等交互元素触发的焦点，不会显示该样式，不会出现点击后样式残留的问题
• 判断逻辑和浏览器原生焦点轮廓显示规则完全对齐，不会破坏网页无障碍访问能力，键盘用户可以正常识别当前焦点位置
• 所有主流现代浏览器均原生支持该伪类，无需额外引入第三方脚本或自行编写交互逻辑

注意：禁止全局为:focus设置outline: none，该操作会导致键盘导航用户无法定位当前焦点位置，存在严重的无障碍缺陷。

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