Bootstrap输入框图标需用绝对定位的字体图标替代背景图，设padding-left留白、position: relative父容器、pointer-events: none防遮挡，并通过color: currentColor适配暗色模式。

Bootstrap输入框加图标时背景图不居中对齐

背景图默认靠左上角贴边，和文字挤在一起，根本不像“带图的输入框”。关键不是加background-image，而是控制它在输入框内的位置和留白。

• 必须设padding-left给图标腾出空间，否则文字会盖住图标（常见错误：只加背景不调内边距）
• background-position用left 12px center比0 50%更稳——像素值能避开不同浏览器对百分比解析的微小差异
• Bootstrap的.form-control本身有padding，叠加自定义padding-left时要算总和，建议用calc(1rem + 24px)这类写法保兼容
• 图标尺寸建议16px × 16px，太大容易撑高输入框，触发line-height重排导致光标错位

图标点击后输入框无法聚焦（focus失效）

图标是纯background-image，没交互能力。用户点图标区域时，事件没落到<input>上，自然不会触发聚焦——这不是Bug，是预期行为。

• 解决办法只有两个：不用背景图，改用<span></span>内联图标并绝对定位；或给<input>加pointer-events: none再在外层<div>上监听click并手动<code>focus()
• 如果坚持用背景图，至少加cursor: text，让用户知道“这里该点输入框本体”
• 注意移动端：iOS Safari对background-position配合touch-action有兼容问题，图标区域可能响应迟钝

使用Font Awesome图标字体替代背景图更灵活

背景图要切图、换色得重做，而字体图标一行CSS就能变颜色大小，适配暗色模式也简单。


CSS工具箱(专业版)
全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
下载
• 把图标塞进<input>前面的<span></span>里，用position: absolute + left: 0.75rem对齐（Bootstrap 5的$input-padding-x默认值）
• 父容器必须设position: relative，否则绝对定位图标会跑到页面顶部
• 用pointer-events: none挂到图标<i></i>上，避免遮挡输入框的点击热区
• 字体图标在Retina屏下比PNG清晰，但要注意font-size设太小（如0.75rem）时某些图标笔画会糊，建议不低于12px

暗色模式下图标颜色自动反色失败

背景图是固定PNG，没法随@media (prefers-color-scheme: dark)切换；字体图标如果没设color: currentColor，也会卡在亮色。

立即学习“前端免费学习笔记（深入）”；

• 背景图方案：必须写两套background-image，用@media包裹，且确保深色模式下的图标文件路径正确（常被忽略：深色图标名带-dark后缀，但CSS里没改）
• 字体图标方案：只要color继承自input的color，并在:root或.form-control里统一控制，就自动同步
• 检查background-color是否覆盖了图标——比如深色模式下input背景是#333，但图标PNG是黑底，就看不见了
事情说清了就结束。最麻烦的其实是图标和文字基线对齐，vertical-align、line-height、padding-top三者稍一不匹配，图标就悬在半空——这问题没法靠一套CSS通吃，得在真实设备上反复调。