:valid 和 :invalid 无反应的主因是表单控件未设置 required、type、pattern 等验证属性，且需用户 blur 或 submit 后才触发校验；disabled 元素不参与验证，自定义组件无效。

为什么 :valid 和 :invalid 样式没反应

最常见原因是表单控件没启用原生验证 —— 它们只对带 required、type="email"、pattern 等验证属性的元素生效，纯 <input> 默认不触发校验状态。浏览器不会主动对空值或任意输入做语义判断。

必须设置验证属性才能触发状态切换

没有验证约束，:valid 始终为 true（初始状态），:invalid 永远不匹配。要让样式动态响应，至少得加一个验证条件：

• required：非空校验（最轻量）
• type="email"、type="url"、type="number"：类型校验
• pattern：正则匹配（如 pattern="[0-9]{6}"）
• min/max（配合 type="number" 或 "date"）

例如：<input type="email" required> 才会让输入非法邮箱时激活 :invalid。

用户未交互前样式可能不更新

多数浏览器采用“懒校验”策略：初始加载时元素默认为 :valid，直到用户聚焦（:focus）再失焦（:blur），或提交表单（submit）时才首次计算状态。这意味着：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

立即学习“前端免费学习笔记（深入）”；

• 刚打开页面时，即使输入了错误邮箱，:invalid 也不会立即生效
• 用 JavaScript 调用 input.checkValidity() 可强制触发，但不会自动刷新 CSS 状态
• 若需实时反馈，得监听 input 或 blur 事件 + 手动增删类名，不能只靠伪类

注意 disabled 和 readonly 的干扰

被禁用的表单控件（disabled）会跳过验证逻辑，:valid/:invalid 都不匹配；readonly 则仍参与校验，但内容不可编辑。另外：

• 自定义组件（如封装的 Input）若用 div + span 模拟输入框，原生伪类完全无效
• Shadow DOM 内部需在影子根中单独写样式，外部 :valid 无法穿透
• 某些旧版 Safari 对 pattern 的支持不一致，建议搭配 title 提示增强兼容性

真正起作用的永远是原生 input、select、textarea 元素本身，且必须有可执行的验证逻辑和用户交互时机。