:valid伪类仅响应浏览器原生校验，空值在required字段下为:invalid，非required则默认:valid；需配合required、pattern或有效type才能触发校验，否则永远:valid；✅图标应通过结构包裹+选择器精确控制，避免空值误显，并注意移动端输入中间态导致的闪动问题。
:valid 本身不“实时”，它只响应浏览器原生校验状态更新——而默认行为是：空值在 required 字段下直接判 :invalid，非 required 字段空值反而是 :valid。所谓“实时显示成功”，本质是控制触发时机 + 避免误判。
为什么 input:valid { color: green } 没反应？
最常见原因是：输入框没参与原生校验。浏览器不会凭空判断“合法”，:valid 只对带约束的控件生效。
-
type="text"且没required/pattern→ 永远:valid（包括空字符串） -
type="email"但值是"foo"→:invalid；填"foo@bar.com"→ 才变:valid -
required必须配合有效type，比如type="number"输入"123"是:valid，但输入"12."立刻变:invalid - 自定义
type如type="phone"被当text处理，失去所有验证能力
如何让 ✅ 图标只在真正合法时出现？
用 ::after 显示对勾很简单，但位置错、飘出、或空值就显示，都是结构和选择器问题。
- 必须用
position: relative包裹<input>，否则absolute定位失效 - 别写
input:valid::after——input自身不能生成伪元素并可靠定位到右侧；推荐把<span class="checkmark">✓</span>放在<input>后面，用input:valid + .checkmark -
.checkmark要设pointer-events: none，否则遮挡光标点击 - 加
input:not(:placeholder-shown):valid + .checkmark可排除 placeholder 显示时的误触发
怎么避免刚加载页面就显示 ✅？
非 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+ 支持），且它不反向对应
移动端和 type="number" 的坑
type="number" 在 iOS/Android 软键盘上输中间态（如 "12."、"-"）会瞬间触发 :invalid，导致 ✅ 频繁闪进闪出。
- 改用
type="text" pattern="[0-9]*"，配合 JS 做数值解析和范围校验，:valid只在完整数字串时生效 - 移动端监听
change事件比input更稳，因为软键盘收起才真正提交值 - 别给
:valid加transition：视觉反馈需要明确，闪烁比不动更伤体验
真正难的不是加个勾，而是让勾出现的那一刻，用户确信“我填对了”。这取决于你是否清楚每个字段的约束边界、浏览器如何解释空值、以及移动端输入流与校验时机的错位。
