直接写 input:focus { outline: none; } 会破坏键盘导航体验，因移除 WCAG 强制要求的焦点可见性；正确做法是替换为 border-color 与 box-shadow 等等效视觉反馈，并针对 iOS Safari 添加 -webkit-tap-highlight-color: transparent 和 -webkit-appearance: none。
直接写 input:focus { outline: none; } 能关掉，但会破坏键盘导航体验——这不是“修复”，是把可访问性问题藏起来。
为什么只写 outline: none 是错的
浏览器加的那圈蓝色/紫色边框，本质是 outline，属于 WCAG 强制要求的焦点可见性保障。单纯设成 none 后，用 Tab 键切换时用户完全看不到当前聚焦在哪。Chrome 和 Firefox 开发者工具里会直接报警告：“Outline is removed but no alternative focus style is provided”。
-
outline: 0兼容性差，旧版 Safari 不认，必须用outline: none - 全局写
*:focus { outline: none; }更危险，连button、a都会失效 - 移动端 iOS Safari 还有另一层点击高亮（
-webkit-tap-highlight-color），和outline无关，单靠outline: none压根没用
正确做法：替换，不是删除
保留 outline: none，但立刻补上等效的视觉反馈。最稳妥的是组合 border-color + box-shadow，既控制样式，又满足 WCAG 2.1 SC 2.4.7 要求（焦点轮廓宽度 ≥ 2px，对比度 ≥ 3:1）。
- 基础写法：
input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); } - 如果输入框原本用了
box-shadow（比如 Bootstrap 的.form-control），记得显式加box-shadow: none再重置 - 想让鼠标点击时不触发焦点样式（仅键盘用户才看到），可用
:focus-visible替代:focus，但需配:focus:not(:focus-visible) { outline: none; }来隐藏鼠标焦点
iOS Safari 必须额外处理的两件事
即使 PC 端一切正常，iOS Safari 上点一下 input 还是会闪一层半透明灰色蒙层——这是系统级点击反馈，:focus 完全不生效。
立即学习“前端免费学习笔记（深入）”；
- 加
input { -webkit-tap-highlight-color: transparent; }关掉点击蒙层 - 加
input { -webkit-appearance: none; }防止 Safari 渲染原生搜索框/数字框等干扰样式 - 这两个属性只在 WebKit 内核生效，不影响 Chrome/Firefox，不用加浏览器前缀判断
真正难的不是“怎么去掉”，而是“去掉之后用户还能不能靠键盘找到输入框”。所有样式替换都得经过纯 Tab 导航测试——不碰鼠标，从第一个可聚焦元素开始按 Tab，确认每个 input 都有清晰、高对比、不突兀的视觉提示。
