CSS变量统一管理focus边框色可避免状态样式覆盖，推荐定义--input-border-color和--input-border-color-focus两变量，结合box-shadow、border-width等多维视觉线索提升可访问性，并需兼容iOS Safari的:focus失效及:focus-visible的渐进增强策略。
用 CSS 变量统一管理 focus 边框颜色
直接写死 border-color 值会导致 :focus、:invalid、:disabled 等状态样式互相覆盖，维护成本高。用 CSS 变量抽离基底色，再按状态动态计算，才是可扩展的做法。
推荐定义两个变量：--input-border-color 作为默认态基础值，--input-border-color-focus 作为聚焦时的强化色（比如更饱和或对比度更高）：
input, textarea, select {
border: 1px solid var(--input-border-color, #d1d5db);
--input-border-color-focus: #3b82f6;
}
input:focus, textarea:focus, select:focus {
border-color: var(--input-border-color-focus);
outline: none;
}
- 不要只给
input:focus写样式 ——textarea和select的默认边框行为不一致，必须显式包含 -
--input-border-color-focus建议比默认色更亮或更饱和，确保 WCAG AA 对比度 ≥ 3:1（尤其在浅灰背景上） - 如果用了深色主题，变量值应随主题切换，而不是硬编码十六进制
:focus 样式里为什么不能只改 border-color？
单靠变色很难被用户感知，尤其在小尺寸屏幕、高分辨率显示器或色觉障碍场景下。浏览器默认 outline 被移除后，若没补其他视觉线索，键盘用户会完全“丢失焦点”。
安全做法是组合至少两项变化：
立即学习“前端免费学习笔记（深入）”；
- 加
box-shadow：比如box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3)，比纯边框更醒目 - 微调
border-width：从1px到2px，增强轮廓感 - 慎用背景色：如需改背景，用透明度 ≤ 0.05 的浅色（
background-color: rgba(59, 130, 246, 0.03)），避免影响文字可读性
移动端 Safari 的 :focus 失效怎么办？
iOS Safari 对 :focus 触发非常保守，默认只在用户主动点击后短暂生效，且常被 -webkit-appearance 干扰。单纯加 outline: none 很可能让整个样式失效。
必须加这行才能稳定触发：
input, textarea {
-webkit-appearance: none;
}
- 这个声明会重置 Safari 对表单控件的原生渲染，让
:focus回归标准行为 - 加了之后要重新检查所有
padding、line-height是否对齐，因为原生样式被清除了 - 别只加在
:focus规则里 —— 必须作用于常态元素，否则无效
什么时候该用 :focus-visible 替代 :focus？
当设计要求“鼠标点击时不显示焦点框，仅键盘 Tab 导航时显示”，就必须用 :focus-visible。但它的兼容性和触发逻辑比 :focus 复杂得多。
关键点：
-
:focus-visible不是:focus的子集 —— 它只在明确由键盘触发时匹配，鼠标点击不会触发 - 必须搭配回退方案：先写
:focus基础样式，再用:focus-visible覆盖（否则 Safari 等旧引擎会完全忽略） - Chrome 100+ 开始支持
:focus-visible，但 iOS Safari 直到 iOS 16.4 才支持，低于此版本会降级为全量:focus
真正难的不是写对语法，而是判断交互意图：表单校验失败时，错误提示和焦点样式要不要叠加？这时候往往得靠 JS 控制 class，而不是只靠伪类。
