:valid 无法直接给 添加图标，因为它是替换元素，不支持 ::after 伪元素；必须通过父容器（如 ）结合 :has() 或 JS 监听来实现状态透传与图标渲染。
为什么 :valid 无法直接给 <input> 添加图标？
因为 <input> 是替换元素（replaced element），原生不支持 ::after 伪元素——浏览器会直接忽略它。你写 input:valid::after 看不到任何图标，不是选择器写错了，是规范限制。
常见错误现象：input:valid::after { content: "✓"; color: green; } 完全没反应。
- 必须用非替换元素包裹
<input>（比如<span></span>或<div>） <li>把 <code>:valid状态“透传”到父容器，再对父容器使用::after - 注意表单控件需有
required、type="email"等校验属性，否则:valid永远为真（空值也 valid） - 给
<input>加required或合适type（如email、url、number），否则:valid不触发 - 用相邻兄弟或子选择器定位：例如
.input-wrapper input:valid + .icon（需额外标签），或更简洁的.input-wrapper input:valid ~ .icon - 更推荐用
:has()（但注意兼容性）：.input-wrapper:has(input:valid)::after—— Chrome 105+ / Safari 15.4+ 支持，Firefox 尚未默认启用 - 若需兼容老浏览器，用 JS 监听
input和blur事件，动态加class="valid"到 wrapper
如何用 input:valid + 父容器 ::after 显示图标
核心是把校验状态从 input “提升”到其容器，再用伪元素渲染图标。推荐结构：<span class="input-wrapper"><input required type="email"></span>。
实操要点：
立即学习“前端免费学习笔记（深入）”；
最小可行示例（无 JS，现代浏览器）：
.input-wrapper {
position: relative;
}
.input-wrapper:has(input:valid)::after {
content: "✓";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: #28a745;
}
:valid 的校验边界在哪？别误以为它能替代 JS 校验
:valid 只响应 HTML5 内置约束（required、minlength、pattern、type），不处理自定义逻辑（比如“密码需包含大小写字母”或“用户名已被占用”）。
容易踩的坑：
-
<input pattern="[a-z]{3}">中正则不带^$也能匹配部分字符串，导致误判 valid；建议显式写pattern="^[a-z]{3}$" - 空值在
required下为:invalid，但去掉required后空值自动变为:valid（哪怕有pattern） -
type="number"输入字母时显示:invalid，但输入"123abc"会被截断为123并变回:valid—— 这是浏览器行为，不可靠
图标位置与交互细节：别让 ::after 干扰用户操作
绝对定位的 ::after 图标如果覆盖在输入框右侧，可能挡住光标或影响点击区域，尤其在移动端。
实操建议：
- 给
<input>设置padding-right，留出图标空间，避免文字被遮挡 - 用
pointer-events: none确保图标不拦截鼠标事件 - 图标颜色建议用
color而非background，方便适配深色模式（配合color-scheme: light dark） - 不要只依赖图标传达状态——屏幕阅读器看不到
::after，需配合aria-live或隐藏文本（如<span aria-live="polite" class="sr-only">格式正确</span>）
真正难的不是画个勾，而是让这个勾在各种输入节奏、焦点切换、国际化提示、无障碍访问下都稳得住。别省那几行 JS 监听逻辑。
