不能随便用 outline: none，因其会破坏键盘用户的焦点可见性，违反 wcag；应改用 :focus-visible 实现键盘聚焦时显示轮廓、鼠标点击时不显示，并配自定义样式。
直接加 outline: none 不可靠，尤其在可访问性（a11y）和聚焦逻辑上会出问题。
为什么 outline: none 不能随便用
浏览器默认给聚焦的 <input> 加蓝色 outline，本质是为键盘用户（如 Tab 导航）提供视觉反馈。粗暴设 outline: none 会让这部分用户“看不见当前焦点在哪”，违反 WCAG 标准，也容易被自动化审计工具报错。
常见错误现象：
- 键盘 Tab 切换时输入框“消失”了，用户不知光标停在哪
- 屏幕阅读器配合视觉焦点失效
- 某些浏览器（如 Firefox）在高对比度模式下会强制恢复 outline，导致样式冲突
安全去除 outline 的正确姿势
必须保留键盘用户的焦点可见性，同时隐藏鼠标点击带来的默认 outline。核心思路：只在非键盘触发聚焦时移除 outline。
- 用
:focus-visible伪类替代:focus—— 它只在键盘操作（Tab/Shift+Tab）触发聚焦时生效，鼠标点击/触摸不会激活 - 对鼠标点击场景，用
:focus:not(:focus-visible)单独处理 - 务必搭配自定义焦点样式，比如改用
box-shadow或边框变色
示例：
input:focus {
outline: none;
}
input:focus-visible {
outline: 2px solid #007bff;
}
input:focus:not(:focus-visible) {
box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25);
}
兼容性与降级方案
:focus-visible 在 Chrome 86+、Firefox 83+、Edge 88+ 原生支持；Safari 15.4+ 开始支持，但旧版 Safari 和 IE 完全不支持。
若需兼容老浏览器：
- 用 postcss-focus-visible 或 focus-visible polyfill（注意它依赖 JS 注入 class）
- 或退而求其次：只对 :focus 改用更柔和的 outline（如 outline: 1px solid #999），而非彻底移除
- 避免用 !important 强覆盖，否则 polyfill 无法接管
真正麻烦的是混合交互场景——比如用户先鼠标点开输入框，再按 Tab 切到下一个，此时焦点状态可能丢失视觉提示。这种边界情况，得靠真实键盘测试反复验证，不能只看鼠标行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
