不能直接写 input:focus { outline: none; }，否则会破坏键盘用户的焦点可见性、违反 wcag、导致屏幕阅读器失效及高对比度模式样式冲突；正确做法是双清 outline 和 box-shadow 并提供替代视觉反馈，或使用 :focus-visible 精准区分交互方式。
不能直接写 input:focus { outline: none; } —— 这会砍掉键盘用户的焦点可见性，违反 WCAG，Chrome/Firefox 开发者工具会直接报错。
为什么 outline: none 是危险操作
浏览器加的那圈蓝色边框，本质是 outline，属于强制性的可访问性保障。单纯设成 none 后：
- Tab 切换时用户完全看不到当前聚焦在哪
- 屏幕阅读器配合视觉焦点可能失效
- Firefox 高对比度模式下会强制恢复
outline，导致样式冲突 -
*:focus { outline: none; }更糟——连<button></button>和<a></a>都会失去焦点指示
input:focus 必须同时处理 outline 和 box-shadow
Bootstrap 或自定义 UI 中，输入框聚焦时的“发光边框”往往由两层叠加造成：
- 浏览器原生
outline（如 Chrome 的蓝色实线） - 框架自带的
box-shadow（如 Bootstrap 的.form-control:focus默认阴影）
只清其中一项，另一项仍会露出来。正确写法要双清 + 替代：
input:focus {
outline: none;
box-shadow: none;
border-color: #ced4da; /* 恢复非聚焦态边框色，或设为 transparent */
}
注意：如果原本用了 box-shadow（比如带圆角发光效果），记得先显式写 box-shadow: none 再重置，否则 CSS 优先级可能不生效。
移动端 iOS Safari 还要额外处理 -webkit-tap-highlight-color
iOS Safari 点击瞬间的灰色/半透明高亮，和 outline 完全无关，outline: none 对它无效。必须单独加：
input {
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
}
这两条只对 WebKit 内核生效，不影响其他平台，但缺一不可。漏掉 -webkit-appearance: none，某些 iOS 版本仍可能保留默认输入框样式干扰。
真正安全的做法：用 :focus-visible 区分交互方式
想让键盘用户有清晰焦点提示、鼠标用户又不看到突兀蓝边？靠 :focus-visible：
-
input:focus:not(:focus-visible)→ 隐藏鼠标点击触发的 outline -
input:focus-visible→ 给键盘 Tab 用户提供合规的视觉反馈（至少 2px 宽、对比度 ≥ 3:1）
示例：
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, 255, 0.25);
}
兼容性注意：Safari 15.4+ 才支持 :focus-visible，旧版需用 focus-visible polyfill；别用 !important 强覆盖，否则 polyfill 无法注入 class。
最易被忽略的一点：混合交互场景（比如先鼠标点开输入框，再按 Tab 切到下一个）下，焦点状态可能丢失视觉反馈。这种边界情况，仅靠 CSS 写完就跑是不够的，必须真实用键盘反复测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
