CSS 使用 :invalid 伪类实现必填输入框未填样式提示

CSS 的 `:invalid` 伪类看似能直接为必填输入框提供未填写时的视觉提示，但实际上受限于浏览器原生表单验证机制——空的 `required` 字段在初始加载或失焦时默认仍被视为 `:valid`，仅在表单提交后才触发状态更新，导致样式常失效；真正可靠的做法是结合 JavaScript 主动调用 `checkValidity()` 并动态切换自定义类（如 `is-invalid`），从而实现精准、实时、跨场景稳定的校验反馈，尤其在 SPA、动态表单等复杂应用中，手动控制 class 是规避状态延迟、残留和浏览器差异的唯一稳健方案。

直接用 :invalid 伪类做必填提示，多数情况下会失效——因为浏览器默认只在表单提交后才触发 :invalid 状态，输入框刚加载或失焦未提交时，required 字段也可能是 :valid。

为什么 :invalid 常常不生效？

关键原因在于 HTML 表单的约束验证（constraint validation）机制： - :invalid 依赖元素是否通过 checkValidity() 检查 - 初始加载时，空的 required 输入框**不自动标记为 invalid**，除非用户交互后提交过表单，或手动调用 reportValidity() - 单纯聚焦/失焦（blur）不会触发状态更新

真正可用的实时校验方案

必须结合 JS 主动干预，让状态“提前就绪”：

• 给 input 添加 required 属性，并监听 input 或 blur 事件
• 在事件中调用 element.checkValidity()，再根据返回值添加/移除自定义 class（如 is-invalid）
• CSS 改用该 class 控制样式，比纯依赖 :invalid 可靠得多

input:required {
  border-color: #ccc;
}
input.is-invalid {
  border-color: #d32f2f;
  background-color: #fff8f8;
}

JS 示例（原生）：

document.querySelectorAll('input[required]').forEach(el => {
  const updateValidity = () => {
    el.classList.toggle('is-invalid', !el.checkValidity());
  };
  el.addEventListener('input', updateValidity);
  el.addEventListener('blur', updateValidity);
});

:invalid 能用但有硬限制的场景

仅当满足以下全部条件时，:invalid 才能“看起来可用”：

• 表单设置了 novalidate 属性（禁用原生提交校验），否则提交后整个表单重置状态
• 用户已至少触发过一次 submit（哪怕被 JS 阻止），此时浏览器会批量标记所有无效字段
• CSS 同时覆盖 :invalid:not(:placeholder-shown)，避免 placeholder 存在时误判（Chrome/Firefox 行为不一致）

示例（脆弱但无需 JS）：

input:required:invalid:not(:placeholder-shown) {
  border-color: #d32f2f;
}

实际项目里，别赌浏览器对 :invalid 的初始状态判断——手动控制 class 是唯一稳定路径。尤其涉及动态增删字段、SPA 路由切换时，:invalid 的状态残留和延迟更新问题会更明显。

好了，本文到此结束，带大家了解了《CSS 使用 :invalid 伪类实现必填输入框未填样式提示》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！