HTML5自定义label的File Input键盘可访问性焦点缺失问题

现有代码聚焦样式不生效的核心问题是键盘Tab时实际获得焦点的是隐藏的原生.file__input元素，而非外层.form容器，你写的.form:focus选择器只会在form元素本身被聚焦时触发，永远无法匹配到文件输入框的聚焦状态。你之前尝试的absolute定位方案不生效，本质也是因为没有绑定正确的焦点触发选择器，和定位方式本身无关。
另外需要注意：隐藏原生文件输入时不能使用display: none或visibility: hidden，这两个属性会让元素直接从键盘导航序列、可访问性树中移除，导致Tab无法切到控件，破坏基础功能，你当前用宽高0隐藏的方向是正确的。

改动最小的实现方式是使用:focus-within伪类监听容器内部元素的聚焦状态，不需要调整现有DOM结构，也不需要改动原生input的隐藏逻辑：

• 给外层.form容器加相对定位，约束内部隐藏input的布局范围
• 把原代码中错误的.form:focus选择器替换为.form:focus-within，该伪类会在容器自身或任意子元素获得焦点时触发
• 给隐藏的原生input加绝对定位，避免宽高0时意外占用布局空间，同时设置合适的z-index保证它不会被遮挡、能正常响应键盘/鼠标事件
• 给焦点轮廓加outline-offset，让高亮边框和label自身的边框留适当间距，视觉提示更清晰

修改后的完整CSS代码如下：

.form {
  width: 180px;
  position: relative;
}
.form .file__label {
  font-weight: normal;
  cursor: pointer;
  width: 180px;
  vertical-align: middle;
  text-align: center;
  padding: 11px 0;
  background-color: #ffffff;
  color: #5e10b1;
  border: 1px solid #5e10b1;
  margin: 0;
}

.form .file__label:hover {
  background-color: #f6f3f9;
  outline: none;
  border: 1px solid #5e10b1;
  text-decoration: underline;
}
.form:focus-within {
  outline: 0;
}
.form:focus-within .file__label {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}
.form .file__input {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  z-index: -1;
}

如果需要避免用户鼠标点击触发文件选择时也显示焦点框（仅保留键盘导航的焦点提示），可以结合:focus-visible和:has伪类优化选择器，把聚焦样式的触发条件改成仅当原生input是键盘聚焦状态时生效，替换原有聚焦样式的选择器即可：

.form:has(.file__input:focus-visible) .file__label {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

这个写法在所有现代浏览器中都已兼容，既满足键盘可访问性的焦点提示要求，也不会影响鼠标操作的视觉体验。

内容的提问来源于stack exchange，提问作者Akanksha Mohanty