因为Bootstrap 5验证图标仅在.was-validated存在且控件满足:valid/:invalid时才渲染，未加novalidate和动态添加.was-validated类则伪元素根本不生成，CSS设置right/top无效。
为什么直接改 .form-control::after 没反应
因为 Bootstrap 5 的验证图标是伪元素 ::after，但它只在 .was-validated 类存在、且控件满足 :valid 或 :invalid 状态时才渲染。没加 novalidate 和 .was-validated，CSS 规则压根不匹配——浏览器连这个伪元素都不生成，你调 right/top 全是白忙。
必须先确保验证流程走通
图标能显示的前提是验证状态真实生效，不是光写 CSS 就行：
-
<form novalidate></form>必须加在<form></form>标签上，否则原生弹窗会拦截所有自定义样式 - 提交时手动加
form.classList.add('was-validated')，不能初始就写死，否则页面一打开全是红框 -
<input type="email" required>这类语义属性得保留，checkValidity()才有依据 - 如果用
setCustomValidity()做业务校验，记得每次都要清空（传空字符串），否则字段永久 invalid
图标位置和颜色怎么真正可控
默认图标靠右贴边，但实际常要它紧贴输入框末尾、垂直居中、甚至换颜色或换 Unicode 字符：
- 把
.form-control设为position: relative，否则right: 0.5rem是相对于.input-group容器，容易叠在右侧 addon 上 - 垂直居中别只靠
top: 50%; transform: translateY(-50%)，line-height 变了就偏移；更稳的是top: calc(50% - 6px)（假设图标高 12px） - 换图标用 Unicode 而非 emoji：
content: "\2705"（✓）、content: "\274C"（✗），避免字体缺失显示方块 - 颜色同步改两处：
.form-control:valid::after和.form-control:invalid::after，不然只调一个没用
容易被忽略的 DOM 结构陷阱
图标是否渲染，不只看 CSS，还卡在 HTML 结构上：
-
.form-control:valid::after是伪元素，不占文档流，但它的定位参考点是最近的position: relative祖先——如果父级是.input-group且没设 relative，图标就会跑偏 - 如果用了
form-floating，结构必须是<input><label><div class="invalid-feedback"> 顺序，中间不能插其他标签，否则 <code>~ .invalid-feedback兄弟选择器失效 - 多个验证状态类（
is-valid/is-invalid）和伪类（:valid/:invalid）共存时，权重不同，CSS 必须按 Bootstrap 源码规则写全，漏一个就回退到默认样式
