怎样在CSS变量中定义统一的焦点框Focus样式？

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，而不是只靠伪类。