必须给input容器设position: relative才能使绝对定位图标准确定位，否则图标会相对于body偏移；应使用容器伪元素::after绘制图标并设置padding-right预留空间，同时通过label包裹或JS实现点击聚焦。
input容器必须设为relative才能让图标absolute定位生效
绝对定位的图标会相对于最近的 position: relative 祖先元素定位，如果父容器（比如 <div> 或 <label>）没设 position: relative，图标就会往上找，最终可能相对 body 偏移，位置完全失控。
- 常见错误：只给图标加
position: absolute，忘了给包裹<input>的容器加position: relative - 正确做法：用一个
<div class="search-box">包住<input>和图标，然后给这个<div>加position: relative - 不要用
<input>自身设relative—— 它是替换元素，盒模型行为不稳定，尤其在 Safari 中容易导致图标错位
图标用伪元素比额外标签更轻量且不易干扰表单逻辑
很多人直接塞一个 <i> 或 <svg> 标签进去，结果发现点击图标时 input 不自动聚焦、或者表单提交逻辑被破坏。用 ::after 伪元素挂载图标，既不增加 DOM 节点，又能完美绑定到 input 上。
- 把图标写进
input::after不行 ——<input>是自闭合标签，不支持伪元素 - 正确写法：给容器（如
.search-box）加position: relative，再用.search-box::after绘制图标 - 记得加
content: ""，否则伪元素不渲染；用background或mask+background-image放图标，避免字体图标加载失败导致空白
input内边距要留给图标空间，否则文字被遮挡或挤压
图标占了右边空间，但 <input> 默认没有右内边距，文字会紧贴图标甚至重叠。这不是“看起来有点挤”的问题，而是实际输入体验断裂 —— 用户打字时看不到最后几个字符。
- 必须给
input设置padding-right，值至少等于图标区域宽度（含 padding 和间隙） - 如果图标宽 20px、右侧留 8px 间隙，则
padding-right: 28px是安全下限 - 别用
text-indent代替padding-right—— 它只缩进第一行，多行文本或 resize 后失效 - 移动端要注意：iOS Safari 对
input的内边距渲染有细微差异，建议加box-sizing: border-box统一行为
点击图标要能触发input聚焦，否则交互断层
图标只是视觉装饰？不是。用户习惯点击搜索图标来激活输入框，如果点了没反应，就等于功能残缺。CSS 本身不能处理事件，但可以靠 HTML 结构和少量 JS 补齐。
立即学习“前端免费学习笔记（深入）”；
- 最简方案：把
<input>放在<label>里，图标作为label的子元素，天然支持点击聚焦 - 如果必须用独立容器（如
div.search-box），就给图标加cursor: pointer和onclick="this.parentElement.querySelector('input').focus()" - 避免给图标加
pointer-events: none—— 这会让点击穿透，看似“方便”，实则剥夺了用户主动聚焦的路径
