:valid伪类不实时触发，仅响应失焦或提交时的原生校验；需确保输入框具备校验属性（如required、pattern或有效type），并配合结构化选择器（如input:valid + .checkmark）和JS辅助控制状态。
:valid 本身不“实时”，它只响应浏览器原生校验状态的变更，而默认触发时机是失焦（blur）或表单提交。想看到“输入正确后立刻变绿/显示对勾”，必须满足两个前提：控件已参与原生校验，且校验状态被及时更新。
为什么 :valid 样式没反应？
最常见原因是输入框根本没被浏览器当作可校验元素：
-
type="text"且没加required、pattern或有效type（如email、number）→ 永远:valid（包括空字符串） -
type="email"但值是"foo"→ 初始不触发:invalid，要等blur或调用checkValidity()才计算 -
type="number"输入中间态（如"12."、"-"）→ 瞬间变:invalid，导致视觉闪动 - 自定义
type="phone"→ 浏览器当text处理，完全绕过校验逻辑
如何让 ✅ 图标只在真正合法时出现？
结构和选择器比样式本身更关键。直接写 input:valid::after 容易定位失败或误显：
- 必须用
position: relative包裹<input>，否则absolute定位的图标会飘出容器 - 别依赖
input:valid::after；推荐把.checkmark放在<input>后面，用input:valid + .checkmark控制显隐 - 加
input:not(:placeholder-shown):valid + .checkmark可排除 placeholder 显示时的误触发 -
.checkmark要设pointer-events: none，否则遮挡光标点击区域
怎么避免刚加载就显示 ✅？
非 required 字段空值默认 :valid，这是规范行为，不是 bug：
立即学习“前端免费学习笔记（深入）”；
- 加
required是最直接解法：空值 →:invalid→ ✅ 不显示 - 若字段可为空，但只希望“有内容且合法”才显示 ✅，得靠 JS 控制：
input.addEventListener('input', () => { el.classList.toggle('has-value', el.value.trim() !== ''); })，再写.has-value:valid + .checkmark - 不要用
:user-valid—— 目前无此伪类；:user-invalid仅 Chrome 102+ / Safari 16.4+ 支持，且不反向对应
真正容易被忽略的是：伪类反馈永远滞后于 JS。哪怕你监听 input 并立即调用 checkValidity()，:valid 的样式更新仍可能卡在下一帧，尤其在移动端输入频繁时。这时候，用 class 切换（如 .is-valid）反而更可控、更可预测。
