17370845950

应禁用默认 outline 并用 box-shadow 模拟焦点边框，兼顾可访问性与多端兼容性；需适配移动端触发逻辑、高对比度模式及表单控件类型差异，提供多层 fallback。

focus 样式被浏览器默认 outline 覆盖

多数浏览器（Chrome、Firefox）对 、、 等表单控件设置了默认 outline，但它的颜色、宽度、偏移量常与背景色对比不足，尤其在浅色主题下几乎看不见。更关键的是，某些 CSS 重置库（如 Normalize.css 或某些 UI 框架）会直接写 outline: none，彻底抹掉焦点提示。

解决思路不是简单加 outline: 2px solid blue，而是用更可控的组合替代：

• 优先使用 outline: none 清除不可靠的默认样式
• 改用 box-shadow 模拟高亮边框（支持圆角、透明度、内/外阴影）
• 确保焦点状态可访问：不能仅靠颜色变化，需有足够对比度（至少 4.5:1）和尺寸变化

input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3),
              0 0 0 4px rgba(33, 150, 243, 0.1);
  border-color: #2196f3;
}

移动端 focus 边框不触发或闪烁

iOS Safari 和部分 Android 浏览器对 :focus 的触发逻辑特殊：点击输入框时可能只触发 :active，或因“缩放聚焦”行为导致 :focus 样式闪一下就消失。这不是 bug，是系统级交互优化。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 给 加 autocomplete="off" 减少自动填充干扰
• 避免在 :focus 中修改 transform 或 opacity，容易触发重绘抖动
• 对 iOS，可额外加 :focus-within 到父容器（如 .form-group:focus-within input），提升捕获率
• 真机测试必须做：模拟器常无法复现触摸焦点延迟问题

自定义 focus 样式影响可访问性

完全去掉 outline 又不提供等效视觉反馈，会直接让键盘用户（Tab 导航）失去当前焦点位置。WCAG 2.1 明确要求焦点指示必须清晰可见。

安全做法：

• 禁用 outline 后，必须用 box-shadow 或 border 提供同等尺寸、对比度的轮廓
• 不要依赖纯色块（如 border: 2px solid #007bff），深色背景上会失效；改用 box-shadow + rgba() 保证明暗环境都可见
• 检查焦点样式是否被其他规则覆盖：用浏览器 DevTools 的 “:focus” 强制状态调试，看 computed styles 是否生效
• 若项目需支持高对比度模式（Windows HC），避免用 box-shadow（部分系统会忽略），改用 outline 并配足够粗的 outline-width

@media (forced-colors: active) {
  input:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

表单控件类型差异导致 focus 行为不一致

和 的 :focus 默认作用于包裹它们的 或伪元素，而非原生控件本身； 则可能受 appearance 影响而忽略 :focus 样式。

统一处理策略：

• 对 radio/checkbox，把 focus 样式写在 label:focus-within 或 input:focus + label 上
• 对 ，显式设置 appearance: none 再定义 :focus，否则某些浏览器会强制渲染系统按钮焦点环
• 对自定义组件（如封装的 ），确保内部真实 或 暴露 tabindex 并正确转发 focus 事件

细节最容易出问题的地方，是以为加了 box-shadow 就万事大吉——它在高缩放比（如 175%）、高对比度模式、或者某些旧版 Edge 下可能完全不渲染。真正可靠的 focus 提示，永远需要多层 fallback。