应禁用默认 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。 
