bootstrap 5 中搜索图标需用 .input-group 包裹并显式设 position: relative，图标容器用 absolute 定位至右侧、z-index: 10 和 pointer-events: none，input 配合 ps-5 防遮挡，推荐 svg 内联或 bootstrap icons。
Bootstrap 5 中 input 内置搜索图标的正确写法
Bootstrap 5 官方已移除 .input-group-prepend 和 .input-group-append，也不再内置搜索图标（.input-group-text 里放 🔍 或 <i></i> 需手动控制样式）。直接套旧教程代码大概率图标错位、尺寸不匹配或点击无响应。
核心是用 .input-group 包裹 input 和图标容器，并确保图标元素具备 position: absolute 定位能力 —— Bootstrap 自带的 .input-group-text 默认是 flex 布局块级元素，不适合做内嵌图标。
- 推荐用
<span class="input-group-text"><i class="bi bi-search"></i></span>，前提是已引入 Bootstrap Icons（CDN 地址必须含bootstrap-icons） - 若只用纯 CSS，可用 Unicode 搜索符号：
<span class="input-group-text">🔍</span>，但字体渲染可能偏大或上下偏移 -
input必须设padding-left（如ps-5），否则文字会遮住图标；图标容器需加z-index: 10和pointer-events: none（防止挡住光标）
图标位置偏右、文字被遮挡的常见修复方式
默认 .input-group-text 在左侧，搜素图标通常要放右边。强行用 flex-row-reverse 会打乱输入框焦点顺序，更稳妥的是用绝对定位把图标“钉”在右侧。
- 给
.input-group加position: relative（Bootstrap 5 的.input-group默认不是 relative，必须显式设置） - 图标容器用
position: absolute; right: 0.375rem; top: 50%; transform: translateY(-50%); - 移除图标容器的
border和background，避免和输入框边框重叠；宽度设为auto，靠内边距撑开 - 如果用了
form-control-sm，图标font-size要同步调小（如0.875rem），否则比例失调
不依赖 Bootstrap Icons 时的轻量替代方案
很多项目不想多引一个图标库，这时用 SVG 内联最可控。注意不要用 <img>，它默认有底部空白，且缩放易糊。
- 直接贴 inline SVG：
<svg class="search-icon" width="16" height="16" viewbox="0 0 16 16"><path d="M11.742 10.344a6 6 0 1 0-1.597-6.957 6 6 0 0 0 6.957 1.597 6 6 0 0 0-6.957 1.597z"></path></svg> - 给 SVG 加
fill: currentColor和vertical-align: middle，让它随文本颜色和行高自动适配 - 避免用
background-image+input::after：CSS 伪元素无法绑定事件，且在input上不生效
移动端点击区域过小导致点不中图标的处理
图标本身尺寸小（如 16×16），用户手指点不到，但又不能单纯放大图标——会破坏输入框整体比例。真正的解法是扩大可点击热区，而不是视觉区域。
- 图标外层包一层
<button type="button" class="btn btn-link p-0"></button>，按钮设position: absolute，宽高设为2.375rem（和 input 高度一致） - 按钮加
border: 0; outline: 0; box-shadow: none;，避免干扰样式 - 监听按钮
click后聚焦input，或触发搜索（取决于业务逻辑） - 别忘了加
aria-label="Search"，满足基础可访问性
.input-group 缺少 position: relative，以及图标容器没关掉 pointer-events —— 这会导致光标无法进入输入框最右侧字符位置。
