:valid 无法触发 ::after 是因 input 为行内替换元素，不生成伪元素盒；需用 label:has(input:valid)::after 或 JS 切换类名实现，且须配合 required 等约束确保校验逻辑生效。
为什么 :valid 无法触发 ::after 显示对勾？
因为 ::after 伪元素默认只能作用于「流内块级元素」，而 <input> 是替换元素（replaced element），且默认为 inline 级别，不生成伪元素盒。直接写 input:valid::after 在所有浏览器中都无效——不是兼容性问题，是规范限制。
用 span 或 label 包裹实现视觉对勾
必须把伪元素挂到能承载 ::after 的容器上，同时保持与表单控件的校验状态联动。推荐两种可靠方式：
- 把
input放进label，利用label:has(input:valid)::after（需现代浏览器支持:has()） - 更兼容的做法：用
span包裹input，配合相邻兄弟选择器 + 属性选择器，例如span.valid input:valid + span::after，但更稳妥的是用 JS 切换类名
实际开发中，**纯 CSS 方案建议用 label 包裹 + :has()**，示例：
label:has(input:valid)::after {
content: "✓";
color: #4CAF50;
margin-left: 8px;
}
注意：:has() 目前 Chrome 105+、Firefox 125+、Safari 15.4+ 支持；旧版浏览器需降级为 JS 控制 .valid 类。
立即学习“前端免费学习笔记（深入）”；
:valid 触发时机和校验前提
:valid 不是“用户输入后立刻生效”，它依赖原生表单约束（required、type="email"、pattern 等），且仅在值满足约束时才匹配。常见误区：
- 没加
required的input即使为空也可能是:valid（比如type="text"无约束时始终 valid） -
type="number"输入非数字时会变:invalid，但清空后可能回退为:valid（取决于是否设required） -
pattern正则不匹配时为:invalid，但空值是否触发取决于是否有required
确保行为符合预期，至少要加 required，或明确设置 pattern 并测试空值逻辑。
对勾图标建议用 SVG 或 Unicode，别用字体图标
用 content: "✓" 简单直接，但字号缩放和颜色控制受限；用 SVG 内联更可控：
label:has(input:valid)::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234CAF50'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
display: inline-block;
width: 16px;
height: 16px;
margin-left: 8px;
}
关键点：
- SVG 需 URL 编码，
#要转成%23，空格转%20 - 必须设
display: inline-block才能生效尺寸 - 避免用
@font-face引入字体图标，因伪元素中字体加载不可靠，且 fallback 困难
真正麻烦的从来不是画个对勾，而是让状态同步、样式稳定、旧浏览器有退路——:valid + ::after 这条路，得先确认你的部署环境敢用 :has()，否则老老实实绑 input 的 input 和 blur 事件去 toggle 类。
