:valid单独作用于普通input无反应，因浏览器仅在用户输入后校验且空值不匹配；未设type或pattern时输入框恒有效，需指定语义化type或pattern并配合required才能激活校验。
为什么:valid单独用在普通<input>上没反应
因为浏览器默认只在用户**输入过内容后**才开始校验，空值时:valid不匹配（哪怕required未触发）。更关键的是：没有设置type或pattern等约束时，输入框永远被视为“有效”——:valid恒为真，但你根本看不到变化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须指定语义化
type（如email、url、number）或添加pattern属性，否则校验逻辑不激活 - 搭配
required使用，确保空值能被识别为:invalid，形成状态对比 - 避免依赖
:valid判断“是否已填”，它反映的是“是否符合规则”，不是“是否非空”
用::after伪元素加打勾图标要绕开哪些坑
:valid 本身不能直接插入内容，必须配合 ::after 或 ::before。但默认情况下，<input> 是替换元素，不支持伪元素——得先把它变成可容纳伪元素的容器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<input>设置position: relative，再让::after绝对定位到右边界 - 图标用
content: "✓"最轻量，避免额外字体或 SVG 请求；若需更精细控制，可用background-image引入小 PNG/SVG - 务必加
pointer-events: none到::after，否则图标会拦截鼠标事件，导致输入框失焦 - 别忘了用
transition平滑显示/隐藏，比如opacity 0.2s，否则图标突显突隐很生硬
:valid + ::after 的完整 CSS 写法示例
下面这段代码能直接复用，适配邮箱输入框：
input[type="email"]:valid {
padding-right: 28px;
}
input[type="email"]:valid::after {
content: "✓";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: #4caf50;
font-size: 16px;
pointer-events: none;
opacity: 1;
transition: opacity 0.2s;
}
input[type="email"]:invalid:not(:placeholder-shown)::after {
opacity: 0;
}
注意：:not(:placeholder-shown) 是关键，它排除了 placeholder 还在显示时的误判——否则刚聚焦就闪一下勾，体验很差。
移动端和 Safari 下的兼容性细节
Safari 对 :valid 的触发时机更保守，尤其在中文输入法未确认前，可能延迟更新状态；iOS 上部分 type（如 tel）根本不走 HTML5 校验，:valid 始终为真。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
type="email"或type="url"，它们在各平台校验一致性最高 - 不要依赖
:valid做表单提交拦截，它只是 UI 反馈层；业务逻辑仍需 JS 调用checkValidity()确认 - 如果发现图标不出现，检查是否漏了
name属性——某些老版本 Safari 要求name存在才启用伪类校验
height 和 line-height 变化而偏移，top: 50% + transform 是目前最稳的垂直居中方式，别用 margin-top 或固定 top 值。 
