应使用 Bootstrap 的 input-group 实现输入框两侧装饰元素，它基于 flex 布局确保对齐、焦点管理与可访问性；需用 input-group-text 包裹前置/后置内容，禁用伪元素图标，验证图标须 JS 动态插入并设 pointer-events: none。
如果您希望在输入框两侧添加按钮、文本或图标等装饰性元素，以增强表单语义与交互体验，则需使用 Bootstrap 的输入框组（Input Group）功能。以下是实现该功能并评估其适用性的具体方法：
一、使用 input-group 构建基础输入框组
Bootstrap 的 input-group 是一套基于 flex 布局的语义化容器，用于将 input 与前置或后置元素组合，确保对齐、焦点管理与可访问性。它避免了绝对定位带来的光标偏移和屏幕阅读器识别失效问题。
1、在 input 外层包裹一个 div class="input-group" 元素。
2、在该 div 内按顺序放置 span class="input-group-text"（用于前置/后置文本或图标）与 input.form-control 元素。
3、若需添加右侧图标，将 input-group-text 放置于 input 标签之后；若需左侧内容，则置于之前。
4、确保图标使用 或 显式插入，不可依赖伪元素，否则辅助技术无法感知。
二、处理验证状态下的内嵌图标
原生 input-group 不会自动在输入框内部右侧渲染验证图标（如 ✔️ 或 ❌），仅控制边框颜色。如需实现「框内右对齐小图标」效果，必须额外封装逻辑，且需规避焦点拦截风险。
1、在 input-group 外层再包裹一层 div style="position: relative;"。
2、通过 JavaScript 动态创建一个 span 元素作为反馈图标，并插入至外层 relative 容器中。
3、监听 input 的 input 和 blur 事件，根据验证结果显隐该 span。
4、为该 span 设置 pointer-events: none，防止遮挡 input 的点击与聚焦行为。
三、避免常见错误配置
某些样式误用会导致图标错位、响应式异常或移动端缩放失真，应严格规避以下写法：
1、禁止在 input-group-text 中设置 font-size: 0 或 line-height: 0，这会使图标渲染异常。
2、若使用图标，推荐统一设为 font-size: 1rem，并配合 height: calc(1.5em + 0.75rem + 2px) 实现垂直居中对齐。
3、不得覆盖 input-group 的基础 display 属性（如改为 inline-block 或 table-cell），否则破坏 flex 对齐与响应式逻辑。
4、当需动态显示/隐藏图标时，禁用伪元素方案，改用 JS 插入真实 DOM 节点并绑定 aria-hidden="true"。
四、input-group 的核心优势
该组件经过大量浏览器兼容性测试与无障碍审计，具备明确的语义结构与键盘导航支持，是替代手工绝对定位的首选方案。
1、采用 display: flex 布局，天然支持响应式宽度分配与跨浏览器对齐一致性。
2、支持 :focus-within 样式联动，使整个 input-group 在获得焦点时可统一高亮边框或背景。
3、与 Bootstrap 表单验证类（如 is-valid / is-invalid）协同工作，能正确触发 :valid / :invalid 伪类及关联样式。
4、所有子元素均保留在标准 tab 键导航流中，屏幕阅读器可依次读出 input-group-text 内容与 input 提示。
五、input-group 的主要局限
尽管 input-group 在多数场景下稳健可靠，但其设计约束也带来若干不可忽视的限制。
1、Bootstrap 不支持在 input 同一侧叠加多个挂件（例如：左侧同时放图标+按钮），强行嵌套将导致布局错乱或 flex 折行。
2、input-group-addon 已于 Bootstrap 5+ 中被完全移除，旧项目迁移时需批量替换为 input-group-text，且无法复用原有样式钩子。
3、当与第三方复杂组件（如日期选择器、富文本编辑器）集成时，其固定 flex 结构可能与外部容器的定位逻辑冲突，需额外 wrapper 层干预。
4、若需实现图标随输入内容动态切换（如搜索框中“清空”与“搜索”图标切换），必须引入 JavaScript 控制，原生 CSS 无法完成条件渲染。
