如何在嵌套input输入无效时修改对应label的样式

方案1：CSS :has() 伪类（推荐，无JS依赖） #

这是最贴合你需求的原生CSS实现，无需修改现有HTML结构，也不需要额外加id属性：

/* 匹配内部包含无效输入项的label元素 */
label:has(input:invalid) {
  color: red;
}

如果需要避免页面刚加载、用户还未输入内容时就触发校验变红，可以替换为user-invalid伪类，仅在用户和输入框交互后（失焦、输入过内容）校验不通过时生效：

label:has(input:user-invalid) {
  color: red;
}

:has() 为CSS Level 4新增特性，目前Chrome 105+、Firefox 121+、Safari 15.4+均已支持，全球浏览器覆盖率超过90%，适合绝大多数现代应用场景。

方案2：JavaScript 兼容方案（全浏览器适配） #

如果需要兼容不支持:has()的旧版本浏览器，可以用少量JS实现联动，无需修改HTML结构：

1. 首先添加对应样式类：

label.input-invalid {
  color: red;
}

2. 添加全局事件监听：

// 监听输入事件实时校验
document.addEventListener('input', e => {
  const input = e.target;
  if (input.closest('label') && input.validity !== undefined) {
    input.closest('label').classList.toggle('input-invalid', !input.validity.valid);
  }
});

// 监听表单提交时的invalid事件
document.addEventListener('invalid', e => {
  if (e.target.closest('label')) {
    e.target.closest('label').classList.add('input-invalid');
  }
}, true);

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