:focus 默认 outline 是无障碍必需的焦点指示器，不可直接用 outline: none 移除；应通过 outline-color、outline-offset 等可控重写，或结合 box-shadow 与 background 增强视觉反馈，同时兼顾高对比度模式、移动端及键盘导航兼容性。
为什么 :focus 默认 outline 看起来又丑又难改
浏览器给 input、textarea 等可聚焦元素加的默认 outline（通常是蓝色虚线或高亮环）不是为设计服务的，而是无障碍访问必需的焦点指示器。直接用 outline: none 会破坏键盘导航体验，尤其对屏幕阅读器用户不友好。
真正要做的，是保留焦点可感知性，同时让视觉反馈更贴合 UI 风格。关键不是“去掉 outline”，而是“重写它”——用 outline 自身做可控替换，或用 box-shadow + background 协同增强。
- 禁用
outline后必须提供等效的视觉替代（比如深色主题下用浅色box-shadow） -
outline不占布局空间，而border或box-shadow可能影响对齐，需统一预留内边距或使用outline-offset - 某些旧版 Safari 对
outline-style: solid渲染不稳定，建议始终显式声明outline-style和outline-width
用 outline 做干净、无障碍友好的焦点边框
最轻量且兼容性最好的方式：覆盖默认 outline，但保持其语义和可访问性。重点在于用 outline-color 和 outline-offset 控制外观，而不是消灭它。
input:focus {
outline: 2px solid #007bff; /* 显式定义宽度、样式、颜色 */
outline-offset: 2px; /* 让 outline 悬浮在 border 外，避免压边 */
outline-color: #007bff; /* 单独设色，方便 JS 动态切换主题 */
}- 不要只写
outline: 2px solid—— 缺少颜色时部分浏览器回退到系统默认色，不可控 -
outline-offset是关键：值为正时 outline 向外偏移，负值会向内挤压，容易遮挡文字或 border - 若输入框已有
border，建议把outline设为比 border 略粗（如 border 1px → outline 2px），确保视觉权重足够
用 background 和 box-shadow 做更精细的焦点反馈
当需要渐变背景、圆角过渡或阴影层次时，outline 能力有限。box-shadow 可模拟 focus glow，background 可微调输入框底色，两者配合比单纯改 border 更灵活。
立即学习“前端免费学习笔记（深入）”；
input:focus {
background-color: #fff; /* 防止 focus 时背景突变（如从浅灰变白） */
box-shadow: 0 0 0 3px rgba(0, 123, 255, .25); /* 柔光效果，不干扰布局 */
}-
box-shadow的第四个参数（alpha）控制透明度，避免遮挡文字；数值太大会让焦点环“糊成一片” - 如果 input 使用了
background-image（如搜索图标），background-color必须显式声明，否则 focus 时可能因继承导致背景消失 - 不要用
transition: background单独过渡 —— 输入框获得焦点瞬间背景变化太生硬；推荐transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out
移动端和高对比度模式下的兼容要点
iOS Safari 和 Windows 高对比度模式会强制重置某些 CSS 样式，导致自定义 focus 效果失效。不能只依赖视觉表现，得兼顾系统级行为。
- 添加
@media (prefers-reduced-motion: reduce)降低或关闭 focus 动画，避免触发眩晕 - 在
@media (forced-colors: active)中重置outline为高对比色（如outline: 2px solid ButtonText），确保强制配色模式下依然可见 - iOS 上点击输入框有时不触发
:focus（尤其在meta viewport缩放异常时），可配合:focus-within或 JS 监听focusin事件兜底 - 别忘了测试 tab 键导航 —— 很多“好看”的 focus 效果在键盘操作下根本看不到，因为开发者只测了鼠标点击
真正难的不是写出好看的 focus 样式，而是让每种交互路径（鼠标、触屏、键盘、辅助技术）都得到一致、明确、不打断流程的反馈。细节都在这些条件分支里，漏掉一个，就可能让某个用户卡在表单第一步。
