当使用 `opacity: 0` 隐藏文件输入框以实现可点击头像上传时，原生焦点环会消失；本文介绍通过 `:focus-within` 伪类在父容器上模拟可见焦点状态，兼顾可访问性与视觉反馈。
在构建可访问的用户头像上传组件时，常见做法是将 <input type="file"> 叠加在可视元素（如头像图片）之上，并设为 opacity: 0 —— 这样既保持其在 DOM 中的可聚焦性、可键盘操作性（支持 Tab 导航和 Enter 触发），又不影响视觉布局。但副作用也很明显：透明输入框获得焦点后，浏览器默认的 outline 不再可见，导致键盘用户无法感知当前焦点位置，严重损害可访问性（a11y）。
解决该问题的核心思路是：不依赖输入框自身的 outline，而是在其可感知的父容器上响应焦点状态。CSS 提供了完美的原生方案：:focus-within 伪类。它会在该元素自身或其任意后代元素获得焦点时触发匹配，因此只需将其应用于 .profile-pic 容器，并添加清晰、符合 WCAG 标准的焦点样式即可。
以下为推荐实现（已整合至原有 CSS）：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.profile-pic { width: 156px; height: 156px; border-radius: 50%; position: relative; }
/* ? 关键修复：当内部 input 获得焦点时，为整个头像区域添加高对比度焦点环 */ .profile-pic:focus-within { outline: 2px solid #007bff; /* 推荐使用品牌色或深蓝，确保与背景足够对比 */ outline-offset: 4px; /* 略微外扩，避免与圆角裁剪冲突 */ box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* 可选：增强视觉层次 */ } |
? 为什么 :focus-within 是最优解？
- 无需 JavaScript 监听 focus/blur 事件，零运行时开销；
- 原生支持键盘导航（Tab → Enter 触发文件选择器 → 焦点自动保留在 input → 父容器立即高亮）；
- 完全兼容屏幕阅读器，语义结构未被破坏；
- 浏览器支持广泛（Chrome 60+、Firefox 61+、Safari 15.4+、Edge 79+），现代项目可放心使用。
?? 注意事项与增强建议：
- 避免仅用 outline: none 或 outline: 0 移除默认焦点样式——这会直接移除可访问性保障；
- 若需兼容旧版 Safari（<15.4），可降级为 JS 方案：监听 input 的 focus 和 blur 事件，动态切换 .profile-pic.is-focused 类；
- 焦点样式应满足 WCAG 2.1 对“非文本对比度”的要求（至少 3:1），建议使用实色边框 + 外阴影组合提升辨识度；
- 为更优体验，可在 :focus-within 状态下同步微调内层图片滤镜（如 filter: brightness(0.4)），形成一致的交互反馈。
通过 :focus-within，我们以声明式、轻量、高可访问的方式，让「看不见的输入框」拥有「看得见的焦点」——这不仅是技术实现，更是对所有用户平等交互权利的尊重。
