如何解决CSS:focus样式在鼠标点击时意外显示的问题

这不是样式写错，而是:focus本就响应所有聚焦方式（含鼠标点击），若要鼠标点击不触发高亮，须改用:focus-visible并配合:focus兜底；后者必须先声明以保障旧浏览器可访问性。

直接说结论：这不是样式写错了，而是:focus本就该在鼠标点击后生效——它响应所有聚焦方式，包括点击。想让鼠标点击不触发高亮，必须换用:focus-visible，且不能丢掉:focus兜底。

为什么鼠标点完输入框还留着蓝边或阴影？

这是:focus的正常行为：只要元素获得焦点（不管用 Tab、鼠标点击还是 JS .focus()），样式就立刻激活。浏览器默认给input加outline，你写了input:focus { outline: 2px solid blue; }，点一下它就聚焦、样式就上；松开手，焦点没移走，蓝边当然不消失。

常见问题表现包括：

1. 用户点输入框后，高亮轮廓一直挂着，直到点别处才消失
2. 移动端 iOS Safari 上点击后轮廓卡住，常因blur被 JS 阻止或事件冒泡干扰
3. 自定义组件里用了pointer-events: none却还指望:focus生效

如何让鼠标点击不显示焦点样式？

靠:focus-visible，但它不能单独存在。必须和:focus配合，顺序不能错：

1. :focus先写，提供基础视觉反馈（哪怕只是outline: 1px dotted transparent）
2. :focus-visible后写，专门强化键盘用户的焦点环（比如更粗的box-shadow）
3. 若只写:focus-visible而没:focus，部分浏览器会完全不渲染任何焦点样式

示例：

input:focus {outline: none;}input:focus-visible {box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25);}

注意：rgba(0, 123, 191, 0.25)里的透明度控制柔和感；设为1会显得生硬。

:focus-visible为什么有时点了也不触发？

这不是 bug，是浏览器 UA 启发式判断逻辑在起作用：如果页面首次交互是鼠标（比如加载完立刻点按钮），Chrome/Firefox 会进入“指针优先”模式，后续 Tab 导航可能暂时不激活:focus-visible，直到用户按Tab或Esc。

验证方法很简单：

1. 打开 DevTools → Elements 面板 → 选中目标元素 → 点击右上角 :hov 按钮 → 手动勾选 :focus-visible，看样式是否生效
2. 别依赖“点完再按 Tab”测试：此时仍可能判定为延续指针会话，:focus-visible不触发
3. 真正可靠的测试路径是：页面加载 → 直接按Tab（不碰鼠标）→ 观察第一个可聚焦元素

自定义组件怎么支持:focus-visible？

加tabindex="0"远远不够。浏览器会拒绝给无语义或无交互能力的元素启用:focus-visible判断逻辑。必须同时满足三个条件：

1. 有明确角色：role="button"、role="switch"等可交互 ARIA role
2. 监听键盘事件：onkeydown中至少处理Enter或Space，否则浏览器认为“这个元素不响应键盘”
3. 确保可获得焦点：不能被pointer-events: none或visibility: hidden阻断

例如一个封装的开关组件，只写<div tabindex="0" role="switch">是不够的；必须加上onkeydown={handleKeydown}，且handleKeydown至少能响应Enter，否则 Chrome 89+ 会静默忽略该元素的:focus-visible匹配。

复杂点在于：不同浏览器对“首次交互类型”的判定逻辑不一致，且移动端 Safari 在软键盘弹出前不会触发:focus-visible——这不是 Polyfill 能绕过的限制，得靠设计妥协或降级方案兜底。