当使用 `opacity: 0` 隐藏文件输入框以实现可点击头像上传时，原生焦点环会消失；本文介绍通过 `:focus-within` 伪类在父容器上模拟可见焦点状态，兼顾可访问性与视觉反馈。

在构建可访问的用户头像上传组件时，常见做法是将 <input type="file"> 叠加在可视元素（如头像图片）之上，并设为 opacity: 0 —— 这样既保持其在 DOM 中的可聚焦性、可键盘操作性（支持 Tab 导航和 Enter 触发），又不影响视觉布局。但副作用也很明显：透明输入框获得焦点后，浏览器默认的 outline 不再可见，导致键盘用户无法感知当前焦点位置，严重损害可访问性（a11y）。

解决该问题的核心思路是：不依赖输入框自身的 outline，而是在其可感知的父容器上响应焦点状态。CSS 提供了完美的原生方案：:focus-within 伪类。它会在该元素自身或其任意后代元素获得焦点时触发匹配，因此只需将其应用于 .profile-pic 容器，并添加清晰、符合 WCAG 标准的焦点样式即可。

以下为推荐实现（已整合至原有 CSS）：

? 为什么 :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，我们以声明式、轻量、高可访问的方式，让「看不见的输入框」拥有「看得见的焦点」——这不仅是技术实现，更是对所有用户平等交互权利的尊重。