空的 required 输入框一加载就红边是因为浏览器将空值视为 :invalid，而 :placeholder-shown 仅在 placeholder 实际渲染时匹配；解决需用 input:invalid:not(:placeholder-shown) 排除纯空触发，并配合 :not(:focus) 防误判，或用 data-submitted + js 实现提交后验证。
为什么空的 required 输入框一加载就红边？
因为浏览器把空值视为 :invalid，而 :placeholder-shown 并不总在 placeholder 存在时生效——它只在 placeholder 实际被渲染时才匹配（比如 input[value=""] 且有 placeholder 属性）。所以纯靠 :invalid 会立刻触发错误样式，用户还没点进去就看到红框。
解决办法是排除“仅因为空才 invalid”的情况：
-
input:invalid:not(:placeholder-shown)：只在用户输过又删空、或输入了但格式错时才生效 - 对 type="email" 等字段，还要加
:not(:focus)避免聚焦瞬间误判（输入中途没失焦前不该标错） - Safari 对空 required 字段的
:invalid行为不一致，必须实测，不能只信文档
如何让 :invalid 样式只在提交后出现？
直接用 :invalid 不行——它在用户第一次失焦就激活。真正符合“提交后反馈”语义的是 :user-invalid，但它只在 Chrome 102+ 和 Firefox 119+ 支持。
兼容方案得靠 JS 配合 CSS：
- 点击提交按钮时，给
<form></form>加data-submitted="true" - CSS 写成
form[data-submitted] input:invalid，这样样式只在提交动作发生后才启用 - 别忘了重置逻辑：验证通过后要移除
data-submitted，否则修正内容后样式卡住不更新
:valid/:invalid 为什么有时不响应动态 value 修改？
浏览器不会监听 JS 对 input.value 的赋值并自动重验——它只响应用户交互（如 keyup、blur）或显式调用 checkValidity()。
常见掉坑场景：
- 用 JS 清空 input：
el.value = ""后，:invalid不立即生效，得手动el.reportValidity()或触发一次blur - 表单初始化时设了默认值，但没调
form.checkValidity()，导致初始状态样式缺失 -
setCustomValidity("error")后没调reportValidity()，伪类完全不更新
用 :placeholder-shown 做状态判断要注意什么？
:placeholder-shown 看似能区分“空但有 placeholder”和“空且无 placeholder”，但它有硬限制：
- 只对带
placeholder属性的元素有效；没写属性，哪怕 DOM 上显示 placeholder 也不匹配 - 当
input有value但值为空字符串（""），部分浏览器仍认为 placeholder 在显示，导致:placeholder-shown为 true - 配合
:focus时注意顺序：input:focus:placeholder-shown:invalid是合法选择器，但input:placeholder-shown:focus:invalid在某些旧引擎下可能失效
最稳的做法还是用 JS 主动控制 is-valid/is-invalid 类——伪类适合兜底或轻量场景，别指望它覆盖所有边界条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
