:valid伪类不生效是因为表单控件缺少name属性或未设置验证属性（如required、pattern、type等），且不能被disabled或readonly禁用；需同时满足参与约束验证的条件。
为什么:valid伪类不生效？检查表单控件是否带name和验证属性
浏览器只对具有name属性且参与约束验证（constraint validation）的表单元素应用:valid/:invalid。常见遗漏是忘记加name，或仅用required却没设type（比如type="email"才能触发邮箱格式校验）。
必须同时满足以下条件：
-
<input>、<select></select>或<textarea></textarea>有name属性 - 设置了至少一个验证相关属性：
required、minlength、maxlength、pattern、type="email"等 - 未被
disabled或readonly禁用（这两者会跳过验证）
如何用::after在输入框右侧显示成功图标
不能直接对input使用content，所以需结合position: relative容器 + 伪元素定位。关键是把图标作为父容器的::after，再用:valid控制其显隐。
示例结构与样式：
<div class="input-wrap"> <input type="email" name="email" required pattern="[^@]+@[^@]+\.[^@]+"> </div>
.input-wrap {
position: relative;
}
.input-wrap input:valid + .input-wrap::after {
/* 错误：+ 选择器无法跨层级 */
}
正确写法是把伪元素挂载在input自身上，并用position: absolute偏移：
.input-wrap input {
padding-right: 24px;
position: relative;
}
.input-wrap input:valid::after {
content: "✓";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: #28a745;
font-size: 14px;
}
.input-wrap input:invalid:not(:placeholder-shown)::after {
content: "✕";
color: #dc3545;
}
:valid和:invalid的触发时机与边界情况
这两个伪类在元素“通过/未通过约束验证”时立即更新，但有三个关键边界容易出错：
- 空值默认为
:invalid（即使没输内容），除非加placeholder并配合:placeholder-shown临时屏蔽 -
type="number"输入字母时是:invalid，但输入空字符串或"-"可能仍为:valid（取决于浏览器实现） - JavaScript调用
setCustomValidity("")后，元素才进入标准验证流；若传入非空字符串，则强制为:invalid
推荐始终搭配:placeholder-shown避免初始误显：
input:valid:not(:placeholder-shown)::after { ... }
input:invalid:not(:placeholder-shown)::after { ... }
图标反馈要兼顾可访问性与性能
纯CSS图标（如content: "✓"）无法被屏幕阅读器识别，且字体渲染在某些系统上模糊。更稳妥的做法是：
- 用
<svg></svg>内联图标，配合aria-hidden="true"，再用aria-live区域播报状态变化 - 避免在
:valid中修改background-image（触发重绘），优先用content或border-color - 不要对
input:focus:valid叠加过多过渡动画——移动端键盘弹起时频繁重排会卡顿
真正难的是让图标在各种input高度、行高、字体大小下自动垂直居中，top: 50% + transform仍是目前最可靠方案，但得测试iOS Safari对transform在input伪元素上的支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
