父容器必须设 position: relative；图标用 ::after 伪元素并写 content: ""；input 需设 padding-right 预留空间；点击图标应聚焦 input，可用 label 包裹或 js 实现。
父容器必须设 position: relative
图标用 position: absolute 后，会往上找最近的已定位祖先；如果没找到，就相对于 body 定位——结果就是图标飘到页面左上角或右侧外边。这不是样式没生效，而是定位基准错了。
常见错误：只给图标加 absolute，或者误给 input 自身设 relative（input 是替换元素，Safari 下盒模型行为异常，极易导致图标错位）。
正确做法是用一个包裹 div（比如 .search-box）包住 input 和图标，并给它加：
.search-box {
position: relative;
}
这个容器不能是 input 的直接父级为 label 且未设 relative，否则同样失效。
图标用 ::after 伪元素比额外标签更稳
input 是自闭合标签，不支持 ::before / ::after；但很多人误写成 input::after，结果图标根本不渲染——因为 content: "" 没生效，或压根没加 content。
正确位置是容器伪元素：
.search-box::after {
content: "";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: url('search.svg') no-repeat center / contain;
}
- 必须写
content: ""，否则伪元素不会生成 - 用
background或mask+background-image，避免字体图标加载失败留白 - 别用
<i></i>或<svg></svg>直接塞进 HTML —— 容易破坏表单聚焦逻辑，除非你额外加 JS 绑定click到input
input 的 padding-right 必须手动预留空间
图标占了右边位置，但 input 默认没有右内边距，文字会直接顶到图标上，甚至被遮挡。这不是“看起来挤”，而是真实输入体验断裂：用户打字时看不到最后几个字符。
计算公式：图标宽度 + 图标右侧间隙（建议至少 4–8px）= 最小 padding-right 值。
例如图标宽 16px、右侧留 6px 间隙，则：
.search-box input {
padding-right: 22px;
box-sizing: border-box; /* iOS Safari 渲染更一致 */
}
- 别用
text-indent代替——它只缩进第一行，resize或多行文本时失效 - 移动端注意：iOS Safari 对
input内边距渲染有细微差异，box-sizing: border-box是必加项
点击图标要能聚焦 input，否则交互断层
CSS 本身不能响应点击，但结构可以补足。最简方案是把 input 放进 label 里，图标作为 label 的子元素：
<label class="search-box"> <input type="search"><span class="search-icon"></span> </label>
这样点击图标天然触发 input 聚焦。如果必须用 div 包裹，就得加一行 JS：
document.querySelector('.search-icon').addEventListener('click', () => {
document.querySelector('input').focus();
});
容易被忽略的是：图标区域必须设 cursor: pointer，否则用户看不出可点；同时要确保图标的 z-index 足够高，不被 input 的 focus outline 遮盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
