这是浏览器严格按html5规范执行的结果：空的required输入框在dom渲染完成瞬间就被判定为无效，:invalid立即匹配；novalidate仅禁用提交拦截，不影响:invalid状态计算；要延迟红框出现，需用input[required]:invalid:not(:placeholder-shown)或js控制touched类。
这不是 bug，是浏览器严格按 HTML5 规范执行的结果：空的 required 输入框在 DOM 渲染完成瞬间就被判定为无效，:invalid 立即匹配。
为什么刚加载就标红所有空 required 输入框
浏览器对 :invalid 的判定只看「当前值是否违反原生约束」，不关心用户有没有点进去、输没输、失没失焦。只要满足两个条件，它就立刻生效：
-
input带required属性 → 初始值为空字符串"" - 空字符串不满足
required的“非空”语义 → 浏览器直接标记为invalid
注意：type="email" 或 pattern 字段在空值时默认是 :valid（未验证态），但一旦加了 required，空值立刻变成 :invalid —— 这就是为什么加了 required 才会“一打开就红”。
为什么 novalidate 也拦不住红边框
novalidate 只禁用表单提交时的默认弹窗和跳转拦截，完全不影响 :invalid 的状态计算和样式匹配。它不关闭原生验证逻辑，只是关掉提交拦截。
- 写了
<form novalidate></form>，里面input[required]依然在加载后立刻是:invalid - 想彻底避免初始红框，只能移除
required等验证属性，或用 JS 控制样式触发时机
怎么让红框只在用户输错后才出现
核心是区分「未触碰」和「已输入且非法」。纯 CSS 可行，但必须加约束条件：
- HTML 中必须有
placeholder属性（哪怕只是placeholder=" "），否则:not(:placeholder-shown)永远不成立 - 推荐写法：
input[required]:invalid:not(:placeholder-shown)—— 表示“值非法 + 用户已输入（placeholder 隐藏）” - 别用
input:focus:invalid：用户刚聚焦但还没输，空required仍会匹配，反而更早触发 - 旧版 Safari（iOS 15.6 以下）不支持
:placeholder-shown，得 fallback 到 JS 控制.touched类
:invalid 失效的常见原因
写了 input:invalid { border-color: red; } 却没反应，大概率不是选择器写错，而是验证链断了：
- 没加任何校验属性：
required、type="email"、pattern、minlength缺一不可 - 用了
type="text"却期望邮箱校验 ——:invalid不认 JS 逻辑，只认原生约束 - 样式被覆盖：比如
input:focus规则写在后面且设置了border-color，会盖掉:invalid - CSS reset 或
all: revert清掉了 UA 默认边框，导致border-color没效果；可加!important或显式设border: 1px solid
最易忽略的一点：即使你用 JS 调用 setCustomValidity("错误")，:invalid 也不会自动更新 —— 必须紧接着调用 reportValidity() 或触发表单提交，才能刷新状态并应用样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
