表单提交时为无效输入设置红色背景的样式问题

解决这个问题的核心是区分「页面加载时的空必填字段」和「提交后验证无效的字段」——原来的input:invalid会在页面加载时就触发空必填字段的样式，下面给你几个实用方案：

方案1：使用:user-invalid伪类（推荐，现代浏览器支持） #

这个CSS伪类专门针对用户交互后的无效状态设计，只有当用户尝试提交表单、或输入后离开输入框时，才会对无效字段应用样式，页面加载时不会触发。

input:user-invalid {
  background-color: red;
}

目前Chrome、Firefox、Edge等现代浏览器都支持这个伪类，无需额外JS代码，实现最简洁。

方案2：通过JS添加提交状态类（兼容旧浏览器） #

如果需要兼容不支持:user-invalid的旧浏览器，可以用JavaScript给表单标记「已提交」状态，再通过CSS选择器针对性设置样式：

HTML结构 #

<form id="targetForm">
  <input type="email" required placeholder="请输入邮箱">
  <button type="submit">提交</button>
</form>

JavaScript代码 #

const form = document.getElementById('targetForm');

// 提交表单时检查有效性，无效则添加标记类
form.addEventListener('submit', function(e) {
  if (!this.checkValidity()) {
    e.preventDefault(); // 阻止表单提交，直到验证通过
    this.classList.add('submitted');
  }
});

// 用户输入时移除标记类，让输入过程中恢复正常样式
form.querySelectorAll('input').forEach(input => {
  input.addEventListener('input', () => {
    form.classList.remove('submitted');
  });
});

CSS样式 #

.submitted input:invalid {
  background-color: red;
}

页面加载时表单没有submitted类，空字段不会变红；提交后如果字段无效，才会触发红色背景，用户输入时又会自动移除样式，体验更友好。

方案3：结合:focus的临时方案（无需JS） #

如果不想写JS，可以用:focus:invalid让聚焦时的无效字段变红，但这个方案的局限性是只有字段聚焦时才会显示红色，用户离开后样式会消失：

input:focus:invalid {
  background-color: red;
}

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