Bootstrap 5 官方唯一推荐且必须使用 input-group + input-group-text 实现带图标表单输入框，因其语义清晰、响应式可靠、无障碍友好；图标须为 input-group-text 的直接子元素（如 i 或 svg），严格按 DOM 顺序控制左右位置，SVG 需设 height="1em" width="1em"，禁用态需统一处理并补充 aria 属性。
用 input-group + input-group-text 是唯一推荐方式
Bootstrap 5 官方只认可 input-group 套 input-group-text 这一套方案，其他所有“给 input 加背景图”“用 ::after 伪元素”“绝对定位塞图标”都属于绕路且易翻车。它不是“能用”，而是“必须用”——因为语义、响应式、无障碍、禁用态处理全靠这套结构兜底。
常见错误现象：input 上直接加 background-image，结果 iOS Safari 光标偏移、缩放 125% 时图标被裁、屏幕阅读器完全读不到图标含义；或者把 i 标签写在 input 外面却不包进 input-group，导致 flex 排序错乱、图标跑到输入框上方或换行。
-
input-group-text必须是input-group的直接子元素，不能嵌套在别的div里 - 左侧图标：
input-group-text写在input前；右侧图标：写在input后——DOM 顺序一错，图标就跑对面去了，CSSorder无法可靠修正 - 如果用 SVG，务必加
height="1em"和width="1em"；用 Font Awesome 就加fa-fw类，避免宽度不一致导致对齐抖动
input-group-text 里放什么图标才合法
只能放真实 HTML 元素：i、span 或 svg，且必须是 input-group-text 的直接子节点。不能靠伪元素（::before/::after）生成图标，也不能只写文字如 “?” —— 前者 IE11 不支持、后者无障碍失效、无交互能力。
使用场景：搜索框常用 <i class="bi bi-search"></i>，密码框右侧常配 <i class="bi bi-eye"></i> 并绑定 click 清空或切换类型；表单验证反馈图标（✔️/❌）不能塞进 input-group-text，得另起一层容器 + JS 动态插入。
- 图标字体需引入对应 CSS，比如 Bootstrap Icons 要加
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css"> - 不要给
input-group-text单独设padding或font-size: 0，会破坏与.form-control的垂直居中逻辑 - 禁用态下，整个
input-group会自动灰掉，但图标若用color控制，需确保它继承自父级文本色，否则可能还亮着
为什么不用背景图或伪元素
背景图方案看着简单，实则三处硬伤：一是 input 点击热区不包含图标区域，用户点图标不会聚焦；二是暗色模式下无法自动适配颜色，得手动写两套 background-image；三是移动端（尤其 iOS Safari）对 background-position 解析不稳定，缩放后容易错位。
伪元素方案（::after）在 IE11 完全不可用，且 input 是替换元素，position: relative 必须加在父容器上，稍有疏忽就会图标飞出视区；更关键的是，伪元素默认 pointer-events: auto，会拦截点击，导致 input 收不到 focus —— 用户点一次图标，还得再点一次框体，体验断裂。
- 坚持用背景图？至少加
cursor: text，并给input手动加padding-left或padding-right留白，值建议用calc(1rem + 24px)避免硬编码像素 - 伪元素若真要用，
::after必须加pointer-events: none，且content不能为空字符串（哪怕写" "） - 所有图标方案中，只有
input-group-text内真实元素能被屏幕阅读器识别，并正确播报aria-label
表单验证状态下的图标叠加难点
is-valid 或 is-invalid 类只会改变边框颜色，不会自动在输入框内显示 ✔️/❌ 图标。想实现「右侧小图标反馈」，不能改 input-group 结构，而要额外包裹一层 position: relative 容器，再用 JS 插入真实 i 元素并监听 input 和 blur 事件控制显隐。
容易踩的坑：有人试图用 input-group-text 塞验证图标，结果和原有图标打架；也有人用 ::after 绝对定位，却忘了加 pointer-events: none，导致清空按钮点不了、输入框聚焦失灵。
- 验证图标元素必须设
pointer-events: none，否则会遮挡 input 的点击热区 - 若图标需点击（如清空），必须用真实
button或i，加tabindex="-1"避免键盘焦点跳入，并补充aria-label - 不要依赖 CSS 主题变量自动变色，
is-valid下的图标色建议显式写成color: #198754，避免继承链断裂
最常被忽略的一点：图标尺寸和行高必须跟 .form-control 对齐，而 Bootstrap 5 的 $input-padding-y 默认是 0.375rem，font-size 是 1rem，所有图标高度应基于这个基准算，而不是拍脑袋设 16px。
