:valid仅对具备原生验证能力的表单元素生效，如type="email"/"url"/"number"、required、pattern等约束的input，以及textarea、select、checkbox、radio；text/hidden等无约束时恒为valid；需触发blur或submit才更新状态，JS需用checkValidity()主动校验。
表单元素哪些能用 :valid 判断合法性
:valid 只对带原生表单验证能力的元素生效，不是所有 都行。关键看有没有浏览器内置校验逻辑：比如 type="email"、type="url"、type="number"、required、minlength、pattern 这类约束。像 type="text" 或 type="hidden" 没加任何验证属性时，浏览器认为它“永远合法”，:valid 会一直匹配。
常见错误现象：input[type="text"] 加了 required 却没反应——其实是有效的，但得先触发验证（比如失焦或提交），否则初始状态是 :blank + :valid 并存，容易误判。
-
textarea和select支持:valid，只要加了required -
input[type="checkbox"]和input[type="radio"]也支持，但逻辑不同：单个checkbox有required时，勾选才:valid；radio组需至少一个被选中 -
contenteditable元素、自定义组件（如 Vue 的封装）完全不响应:valid
:valid 样式为什么没生效或延迟出现
根本原因在于浏览器只在“约束验证”（constraint validation）触发后才更新 :valid 状态。它不是实时监听输入值变化，而是依赖用户交互或 JS 主动调用 checkValidity()。
典型场景下，输入过程中不会立刻变绿勾：比如用户在 input[type="email"] 里打 a@，此时仍显示 :valid（因为未失焦，未触发校验）；直到 blur 或 submit 才重算。
- 想实现“边输边验”，必须配合 JS：监听
input事件，手动调用el.checkValidity()，再用 class 控制样式 - 避免用
:valid:not(:placeholder-shown)做空值过滤——:placeholder-shown在有默认 value 时可能不匹配，逻辑不可靠 - 某些安卓 WebView 或旧版 Safari 对
:valid更新时机有延迟，建议加transition缓动，别依赖瞬时样式切换
绿色勾图标的实现细节和兼容性注意点
用 :valid 配合 ::after 插入 ✅ 最常见，但要注意伪元素默认是 inline，且不继承父级颜色/尺寸。直接写 color: green 不一定生效。
input:valid {
position: relative;
}
input:valid::after {
content: "✓";
color: #4caf50;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
}
容易踩的坑：
- 没设
position: relative在 input 上，::after会相对 body 定位，飘走 - 在
input[type="number"]上，右侧有浏览器自带上下箭头，::after容易重叠，建议用padding-right预留空间 - IE 完全不支持
:valid伪类，如果需兼容，得用 JS 动态加 class（如is-valid） - 部分屏幕阅读器不会把
::after内容当可访问内容，纯图标无文字时，建议加aria-hidden="true"或用背景图替代
为什么有时 :valid 和 JS 的 checkValidity() 结果不一致
本质是验证时机和上下文不同。:valid 是 CSS 层面对当前 DOM 状态的快照，而 checkValidity() 是 JS 主动触发一次完整校验流程，会强制检查所有约束，包括那些尚未触发的（比如未失焦的必填字段）。
例如：一个空的 input[required]，页面加载完，CSS 认为它 :valid（因未触发验证），但 JS 调用 el.checkValidity() 会立刻返回 false。
- 不要在 CSS 里依赖
:valid做关键业务逻辑判断，比如禁用提交按钮——应该用 JS 监听input+blur+submit综合控制 -
form.checkValidity()返回的是整个表单是否通过，而单个元素的:valid只管自己，别混用 - 如果用了
setCustomValidity("xxx")，JS 设置的错误信息会覆盖原生校验结果，此时:valid状态由该方法返回值决定（空字符串才合法）
真正要稳，就得接受一点：CSS 伪类只是视觉反馈的快捷方式，不是验证引擎。复杂规则、跨字段联动、异步校验，都得交给 JS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
