:invalid 伪类失效的主因是缺少约束属性或未触发验证逻辑；需配合 required、type="email" 等属性，且表单需交互或提交后才生效，推荐用 :user-invalid 提升体验。
直接用 :invalid 会失效的常见原因
很多开发者写了 input:invalid { border-color: red; } 却没效果，核心问题在于：浏览器只对「有约束属性（如 required、type="email"、pattern）且当前值违反该约束」的输入框才触发 :invalid。纯空值或随意输入不会自动激活验证逻辑。
- 没加
required或type等校验属性 →:invalid永远不匹配 -
type="text"即使输错邮箱也不会被判定为 invalid（得用type="email"） - 表单未提交过，部分浏览器对未交互的
input延迟应用:invalid样式（尤其是 Chrome）
:invalid 和 :user-invalid 的关键区别
:invalid 在任何验证失败时都生效，但可能在用户还没输完就亮红边（比如刚点进空 required 输入框，立刻变红）；而 :user-invalid 是 CSS Selectors Level 4 新增伪类，只在用户明确操作后（如失焦、提交、或输入后修改）才触发，体验更合理。
- 兼容性：
:user-invalid目前仅 Chromium 102+ 和 Safari 16.4+ 支持，Firefox 尚未支持 - 推荐组合写法：
input:invalid:not(:user-invalid) { border-color: #ccc; }这样既保底又提升体验
input:user-invalid { border-color: red; } - 若只支持老浏览器，可用 JS 监听
blur或submit后给元素加class="invalid"再样式控制
配合 HTML5 表单属性才能真正生效
单独写 CSS 不够，必须让浏览器知道“什么算非法”。以下属性会触发原生验证和 :invalid：
-
required：非空校验 -
type="email"/type="url"/type="number"：格式校验 -
minlength="5"、maxlength="20"、min="10"、max="100" -
pattern="[A-Za-z]{3}"：正则校验（注意：需完整匹配，不是 contains）
示例 HTML + CSS：
立即学习“前端免费学习笔记（深入）”；
input:invalid {
border: 2px solid red;
outline: none;
}
input:valid {
border-color: #4caf50;
}
注意表单重置和动态内容的影响
如果用 JS 清空输入框（如 el.value = ""），浏览器不一定立刻重新评估有效性；调用 el.reportValidity() 或 form.reset() 才能强制刷新状态。
-
form.reset()会清空值并重置所有验证状态（包括移除:invalid） - 动态插入的
input元素，需确保属性完整（如漏掉required），否则即使有 CSS 也无效 - 自定义校验（
setCustomValidity()）会影响:invalid：传入非空字符串即触发，传空字符串则解除
容易被忽略的是：边框颜色变化可能被 outline、box-shadow 或父容器 border 遮盖，调试时建议临时加 outline: 2px solid orange; 确认伪类是否命中。
