:invalid 一加载就标红空 required 输入框是规范行为，因浏览器严格按 HTML5 原生验证逻辑判定有效性；:invalid:not(:placeholder-shown) 可缓解该问题，但需 placeholder 属性且不兼容旧版 Safari；novalidate 不影响 :invalid 状态计算；:user-invalid 更语义化但兼容性有限。
为什么 :invalid 一打开页面就标红所有空 required 输入框
这不是 bug，是浏览器严格按 HTML5 规范执行的结果：空的 required 字段在 DOM 加载完成瞬间就被判定为无效值，:invalid 立即匹配。
关键点在于「有效性状态」由浏览器原生维护，不依赖用户是否操作过。只要元素带 required、type="email" 或 pattern，且当前值不满足约束，它就是 :invalid——哪怕用户还没点进去、没输一个字。
常见误判场景：
- 以为“没输过就不该报错”，但规范里没有“未触碰”状态，只有
valid/invalid二元判断 - 把
:invalid当成 JS 的blur事件回调，其实它是纯声明式、静态计算的状态伪类 - 没意识到
placeholder不参与校验，仅用于视觉提示；空值 +required= 直接invalid
:invalid:not(:placeholder-shown) 是什么，为什么能缓解“一加载就红”
这个组合选择器不是万能解药，但它是最轻量、无需 JS 的折中方案：前提是输入框必须有 placeholder 属性（哪怕只是空格 placeholder=" "）。
立即学习“前端免费学习笔记（深入）”；
:not(:placeholder-shown) 表示 placeholder 文本当前不可见，即用户已输入内容（哪怕只敲了一个空格），或主动清空了 placeholder 并失焦。此时再叠加 :invalid，才能触发样式。
实操要点：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须写
input[required]:invalid:not(:placeholder-shown)这类带属性的选择器，避免被通用重置样式覆盖 - 不要用
input:focus:invalid—— 用户刚聚焦但还没输，空值仍会匹配，反而更早触发红框 - 旧版 Safari 不支持
:placeholder-shown，若需兼容 iOS 15.6 以下，得 fallback 到 JS 控制.touched类
为什么加了 novalidate 表单还是立刻红？
novalidate 只禁用浏览器默认提交时的弹窗提示和阻止跳转行为，**不影响 :invalid 的状态计算和样式匹配**。它不关闭原生验证逻辑，只是关掉提交拦截。
所以即使写了 <form novalidate>，里面带 required 的 input 在加载后依然立刻是 :invalid。
真正可控的方式只有两种：
- 移除
required等验证属性 → 彻底放弃原生校验，全靠 JS 驱动 - 用 JS 在首次提交后给表单加类（如
.was-validated），再写.was-validated input:invalid→ 把样式生效时机锚定到用户明确意图提交的那一刻
现代浏览器推荐用 :user-invalid 吗
可以，但别当默认方案用：:user-invalid 确实只在用户编辑过且值非法时才匹配，语义更准确。但它在 Chrome 102+、Firefox 119+、Safari 16.4+ 才稳定支持，而当前（2026年7月）仍有约 12% 的生产环境用户使用旧版 Safari 或 Electron 内核。
如果你的项目明确要求最低支持 Safari 16.4，那 input:user-invalid 比 :invalid:not(:placeholder-shown) 更干净；否则，后者仍是兼容性与简洁性平衡最好的选择。
注意：:user-invalid 不会响应 JS 赋值后调用 reportValidity() 的状态变更，它只认用户真实键盘/粘贴输入，这点和 :invalid 不同。
