输入框:valid样式未生效是因为缺少required等约束属性或type语义化类型；首次加载时未聚焦的required输入框为:invalid，失焦后才触发验证；需用:not(:placeholder-shown)避免空输入误判，复杂校验须用JavaScript。
输入框合法内容样式没生效？检查表单控件是否带 required 或约束属性
:valid 伪类只在浏览器能验证输入状态时才触发，不是所有 都默认可验证。比如 没有内置校验规则，即使用户输了一串字符，:valid 也始终为 false。
必须显式添加约束条件：
-
required：非空校验（最常用） -
minlength/maxlength：长度限制 -
pattern：正则匹配（如邮箱、手机号） -
type为email、url、number等带语义的类型
否则 :valid 永远不匹配，样式自然无效。
:valid 和 :invalid 的触发时机与用户交互有关
浏览器默认行为是：首次加载时，未聚焦的 required 输入框处于 :invalid 状态（哪怕为空）；但用户一旦聚焦又失焦（blur），才会触发实时验证并更新伪类。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 刚打开页面时，
:valid样式可能不会立刻显示，哪怕你已填好内容 - 用户修改后立即失去焦点，才会重新计算
:valid/:invalid - 若想“输入中就响应”，需配合 JavaScript 监听
input事件 +checkValidity()手动控制 class
纯 CSS 方案无法做到输入过程中的即时反馈。
常见写法与易错点
正确写法示例（带约束 + 合理选择器）：
input:valid {
border-color: #4caf50;
box-shadow: 0 0 4px rgba(76, 175, 80, 0.3);
}
input:invalid:not(:placeholder-shown) {
border-color: #f44336;
}
注意几个关键细节：
-
:not(:placeholder-shown)是为了排除 placeholder 显示时误判为:invalid（否则空输入框一加载就红边） - 不要只写
input:valid，而忽略input[type="email"]:valid这类更具体的场景 —— 不同 type 的验证逻辑不同 -
:valid不会继承，也不作用于父容器；想给整个表单项加样式，得用相邻兄弟或子选择器配合结构标记 - 某些旧版 Safari 对
pattern+:valid支持不稳定，建议搭配title属性提供 fallback 提示
JavaScript 补充验证时，别覆盖原生 :valid 状态
如果用 JS 调 setCustomValidity('') 或 reportValidity()，会直接影响元素的 :valid 计算结果。但要注意：
- 调
setCustomValidity('')后，元素才可能进入:valid状态；设为非空字符串则强制:invalid - 手动调
reportValidity()会触发原生提示，但不会自动更新样式 —— 样式仍靠伪类驱动，JS 只是“通知浏览器重算” - 避免在
input事件里频繁调setCustomValidity，可能造成性能抖动或输入卡顿
原生 :valid 是轻量级方案，复杂逻辑（如异步校验、依赖其他字段）必须用 JS 控制 class，不能硬靠伪类。
