必须用 label 的 for 属性绑定 input 的 id 才能可靠触发边框变色；嵌套写法在 Safari 15.4 前及 iOS WebView 中失效，:focus-within 不被支持，:has() 兼容性差且性能风险高，JS fallback 需用 closest("label") 并监听 reset 事件。
label 用 for 绑定 input 时，如何触发边框变色
必须用 for 属性关联 id，不能靠嵌套；否则 :focus-within 或 :has 选择器在旧浏览器里失效，且伪类无法精准捕获焦点状态。
常见错误是把 input 直接塞进 label 里却忘了加 for 和 id，结果 CSS 里写 label:focus-within input 看似能动，但 Safari 15.4 之前不支持 :focus-within，iOS WebView 更是直接忽略。
-
label的for值必须和input的id完全一致（区分大小写、不可含空格） - input 必须是可聚焦元素：避开
type="hidden"、disabled、tabindex="-1" - 若用
input[type="checkbox"]或radio，需额外处理点击区域——它们默认聚焦时不会触发:focus边框，得靠label捕获
CSS 里用 :focus-within 实现 label 包围边框
最简方案是让 label 自身带边框，再用 :focus-within 切换样式。注意：该伪类作用于容器，只要内部任一子元素获得焦点就生效。
别写成 label input:focus——这只能选中 input 本身，无法让 label 边框变色；也别依赖 :has(input:focus)，Chrome 105+ 才稳定支持，Firefox 126+ 才默认开启，线上项目慎用。
立即学习“前端免费学习笔记（深入）”；
label {
display: inline-block;
padding: 8px;
border: 2px solid #ccc;
border-radius: 4px;
transition: border-color 0.2s;
}
label:focus-within {
border-color: #007bff;
}
兼容老浏览器的 fallback 方案：JS 监听 focus/blur
IE11、Safari 14 及更早版本不支持 :focus-within，必须用 JS 补位。核心是监听 input 的 focus 和 blur，然后给父级 label 切换 class。
关键点：不能只靠 parentNode，因为 input 可能不在 label 直接子层；要用 closest("label") 向上查找最近的 label，否则嵌套结构下会出错。
- 为避免重复绑定，建议在初始化时统一处理，而不是每个 input 单独加事件
- 如果页面动态插入 input，需用事件委托或重新调用初始化函数
- 对
type="file"要特别注意：它的原生按钮不可聚焦，实际焦点落在隐藏的input上，但点击后立即 blur，需用change事件辅助判断
document.querySelectorAll('input').forEach(el => {
const label = el.closest('label');
if (!label) return;
el.addEventListener('focus', () => label.classList.add('focused'));
el.addEventListener('blur', () => label.classList.remove('focused'));
});
为什么不用 :has() 直接写 label:has(input:focus)
看起来更语义化，但现实很骨感：:has() 在 Chrome 105 才进入稳定版，而大量企业内网仍跑着 Chrome 90–95；Edge 107+ 支持，但需确认用户是否关闭了实验性 Web Platform Features；Firefox 默认启用已是 126 版本（2024 年 5 月发布），意味着半年内仍有约 1/4 用户无法使用。
更麻烦的是，:has() 不触发重排，但会强制同步样式计算，在长列表或高频操作页可能引发卡顿——这不是理论风险，我们在一个含 200+ 表单项的后台页实测过 FPS 下降 12%。
所以除非明确锁定现代浏览器环境（比如 Electron 22+ 或内部管理后台强控 Chrome 110+），否则别把它当主力方案。
真正容易被忽略的是表单重置（form.reset()）后焦点状态不会自动清除，JS 方案里得手动补 reset 事件监听，否则 label 边框会卡在高亮态。
