input 是替换元素，不支持 ::before/::after 伪元素，因此 input:valid::after 无效；正确做法是将伪元素移至关联的 label 上，通过 label:has(input:valid) 或 input:valid + label::after 实现视觉反馈。
:valid 无法直接在 input 上用 ::after 显示打勾图标——这不是浏览器兼容问题，而是规范限制：input 是替换元素（replaced element），不支持伪元素。
为什么 input:valid::after 一定无效
所有现代浏览器都会忽略这条规则。CSS 规范明确禁止在 input、img、textarea 等替换元素上使用 ::before 或 ::after，因为它们的渲染由 UA 控制，没有“内容流”可插入。
常见错误现象：
- 写了
input:valid::after { content: "✓"; }却完全没反应 - 开发者工具里能看到样式被划掉（invalid），但误以为是拼写或优先级问题
- 试图加
display: inline-block或position: relative也无济于事
正确做法：用 label 承载 ::after，靠属性选择器联动
核心是把视觉反馈从 input 转移到其关联的 label 上，利用 label[for="xxx"]:has(input:valid) 或更兼容的「相邻/兄弟选择器 + 属性状态」组合。
实操建议：
- 确保
input有id，且label的for属性值与之匹配（例如input#email→label[for="email"]） - 把
::after写在label上，用label:has(input:valid)触发（Chrome 105+ / Safari 15.4+ 支持） - 若需兼容旧版浏览器（如 Firefox 120 以下），改用
input:valid + label::after，并把label放在input后面 -
label需设为position: relative，方便绝对定位::after图标
简短示例（兼容方案）：
input#email:valid + label::after {
content: "✓";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: #4CAF50;
}
:valid 触发条件容易被忽略的细节
:valid 不是“用户输完就生效”，它依赖 HTML5 表单验证约束，且初始空值可能被判定为 :invalid（尤其带 required 时）。
关键点：
-
input[type="email"]只有输入符合邮箱格式才触发:valid；纯字母或空值均为:invalid - 带
required的input，初始聚焦前为空 →:invalid；填入任意非空字符 →:valid（即使不合格式） - 想避免初始红框/叉号干扰，可用
input:not(:placeholder-shown):invalid做延迟校验 -
:valid和:invalid互斥，但不会同时存在；它们不响应实时输入，只在值变更后由浏览器重新评估
真正卡住人的地方，往往不是怎么写 CSS，而是没意识到 input 本身不能挂伪元素——这个限制一旦记牢，后续所有绕行方案就都有了逻辑支点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
