:valid 和 :invalid 伪类不实时响应输入，仅在校验激活态（如失焦、提交）后计算；空 required 字段常初始为 :invalid，但 :valid 需用户输入有效值并完成校验周期才生效。
为什么 :valid 和 :invalid 不会一输入就变色
浏览器默认只在用户与字段发生交互（比如失焦、提交，或某些浏览器中输入后短暂延迟）后才触发原生校验逻辑，:valid 和 :invalid 才会被计算并应用。页面刚加载时，哪怕写了 required，空输入框也常被判定为 :invalid，但样式不立即生效——不是 CSS 失效，而是该伪类尚未进入“校验激活态”。
常见错误现象包括：
- 写了
input:invalid { border-color: red; }却没反应 - 用户输错内容后边框不变红，直到点提交或切走焦点才变
- 清空后点击
<button type="reset">，边框颜色卡在红色，实际值已为空
根本原因是：这些伪类依赖 HTML5 表单验证的“校验时机”，而非 DOM 值变化事件。它不监听 input 事件，也不响应实时输入。
:invalid 为什么空值就触发，而 :valid 却要等用户填完再生效
:invalid 在字段有校验约束（如 required、type="email"、pattern）且当前值违反规则时即匹配。空的 required 输入框，从加载起就是无效状态，所以 :invalid 可能立刻生效（尤其在 Chrome 中）；但 :valid 必须等到用户输入一个通过校验的值，并完成一次校验周期（通常是失焦或提交），才会被标记为有效。
立即学习“前端免费学习笔记（深入）”；
这意味着：
- 仅靠
:valid做“成功反馈”会有明显滞后，不适合做实时绿色边框 - 想避免“刚打开页面所有必填项就标红”，得用
:user-invalid替代（Chrome 107+ / Safari 16.4+ 支持），它只在用户修改过字段且当前值无效时才匹配 -
input:not(:placeholder-shown):invalid是个兼容性更广的折中写法，等用户开始输入后再标红
为什么加了 required 还是没反应
伪类不生效，90% 是因为表单控件缺少触发校验的属性，或者属性写法有误。必须显式添加且拼写正确：
-
required是布尔属性，不能写成required="true"（虽然部分浏览器容忍，但不可靠） -
type="email"或type="url"才会启用邮箱/URL 格式校验；type="text"不会 -
pattern必须是完整正则字符串，比如pattern="[0-9]{6}"，不能带前后/ -
minlength="6"等约束也要明确写出，不能只靠 JS 控制
另外注意：textarea 和 select 同样支持 :invalid，但 select 需配合 required 且第一个 <option> 的 value 为空（如 <option value="">请选择</option>）才能触发校验。
边框颜色写对了，为什么还是看不到变化
最常被忽略的前提是：border-style 没设置。没有边框样式，border-color 再准确也渲染不出来。
建议统一用简写：
- 写
border: 1px solid #dc3545;，而不是只写border-color: #dc3545; - 确保
:focus、:hover、:invalid等状态都单独设置了border，否则某个状态可能回退到浏览器默认边框（比如 Chrome 的浅灰细线） - 检查是否被框架样式覆盖，比如 Bootstrap 的
.form-control有高优先级border声明，可用input.form-control:invalid提升权重，或临时加!important排查 - 移动端 Safari 对
:invalid触发较保守，可叠加:focus:invalid增强反馈
真正难搞的不是怎么写，而是校验状态和视觉反馈之间存在天然的时间差——浏览器不给你控制校验时机的 API，只能靠 :user-invalid、not(:placeholder-shown) 或 JS 手动管理 class 来绕过这个限制。
