图标不能直接用 background-image 是因为无法响应点击、不能随文字选中、且在移动端易偏移或裁切；应将图标作为独立元素用绝对定位压入 relative 父容器，配合 top:50%+transform:translateY(-50%) 垂直居中，并通过 label 关联实现聚焦，同时预留足够 padding-right 避免遮挡。
input 里放图标为什么不能直接用 background-image
因为纯 background-image 的输入框，图标无法响应点击、无法随文字一起选中、也不能和光标对齐——尤其在 iOS Safari 或 Chrome 移动端，input 的内边距和行高计算不一致，图标容易上下偏移或被裁切。
真正可控的方式是把图标作为独立元素塞进 input 容器，靠定位压上去。关键不是“能不能”，而是“怎么压得稳、点得准、缩放不崩”。
- 图标必须用
position: absolute，父容器加position: relative - 图标尺寸建议用
em或rem，避免固定px在不同字号下错位 - 移动端要额外加
pointer-events: none到图标上（否则会拦截input的 focus） - 如果图标是 SVG，记得设
width和height，不然可能默认撑满容器
如何让图标始终对齐 input 文本的垂直中线
靠 top: 50% + transform: translateY(-50%) 是最可靠的做法，比 vertical-align 或 flex 更兼容老浏览器，也避开 line-height 在不同字体下的浮动误差。
但要注意：这个方案依赖父容器有明确高度。如果 input 高度由 padding 和 font-size 动态决定，就得确保父容器也继承或显式设置 height。
立即学习“前端免费学习笔记（深入）”；
- 父容器推荐写
height: calc(1.5em + 12px)（对应font-size: 1em+padding: 6px） - 图标本身不要设
line-height，它不是文本流元素 - IE11 不支持
transform的简写，但translateY(-50%)单独可用
点击图标触发 input 聚焦的正确写法
很多人直接给图标绑 click 事件再调 input.focus()，结果在 Safari 上失效——因为图标在 input 外层，Safari 对非表单元素触发 focus 有严格限制。
更稳妥的是用 HTML 原生能力：label 关联 for，或者把图标包进 label 里并用 htmlFor（React）或 for 属性指向 input 的 id。
- 图标必须是
label的子元素，且label的for值等于input的id - 不要用
onclick="xxx.focus()"，绕过浏览器焦点策略易出问题 - 如果用了 React，确保
id和htmlFor动态一致，别硬编码
图标位置偏右时，input 的 padding-right 必须手动留空
这是最容易漏的一步。很多人只写了图标定位，却没调 input 的 padding-right，导致文字紧贴图标、光标卡在图标后面、甚至输入内容被遮挡。
留白量不是凭感觉，而是图标宽度 + 图标到边框的距离。如果图标宽 16px，右边距 12px，那 padding-right 至少得 28px，还要预留一点防抖空间。
- 推荐用 CSS 变量统一管理：
--icon-size: 16px、--icon-spacing: 12px，然后padding-right: calc(var(--icon-size) + var(--icon-spacing)) - 如果图标可选显示/隐藏，用 JS 切换类名比动态改
style.paddingRight更稳定 - 注意
box-sizing: border-box必须开启，否则 padding 计算会意外溢出
图标的定位逻辑看似简单，但每个像素都卡在浏览器渲染细节上。最常出问题的不是代码写错，而是忘了同步调整 padding、忘了禁用图标的 pointer-events、或者在响应式断点里漏掉了 transform 的重置。
