应关闭浏览器默认搜索图标并用伪元素自定义：先设-webkit-appearance:none隐藏原生控件，再用.search-wrapper::before绝对定位绘制图标，配合em单位和transform实现缩放自适应，同时清除::-webkit-search-cancel-button残留。
搜索框里的放大镜图标为什么总对不齐
浏览器默认的 input[type="search"] 会渲染一个内置放大镜（尤其在 Safari 和 Chrome），但它不是 DOM 节点，没法直接选中、改颜色或调整位置。你用 padding-left 或 text-indent 硬推文字，往往只治标——换字体、换字号、换缩放比例，图标就又偏了。
真正可控的方式是关掉它，自己用伪元素画一个：
- 给
input加appearance: none（注意加-webkit-appearance: none兼容旧版 WebKit） - 用
::-webkit-search-decoration和::-webkit-search-cancel-button隐藏原生控件（Safari/Chrome 专用） - 然后在父容器上用
::before或::after画图标，配合position: absolute精确锚定
用 ::before 还是 ::after 放图标更稳妥
必须用 ::before —— 因为 input 是替换元素（replaced element），::after 在它后面无法渲染（即使设了 content 也无效）。只有把图标塞进父容器（比如 div.search-wrapper），再用 ::before 绝对定位覆盖上去，才可靠。
示例结构：
<div class="search-wrapper"> <input type="search" placeholder="搜点什么"> </div>
对应 CSS：
.search-wrapper { position: relative; }.search-wrapper::before { content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url('lens.svg') no-repeat center / contain; }- 别忘了给
input右侧留出足够padding-right，避免文字盖住图标
transform: translateX() 比 left/right 更抗缩放
用 right: 12px 看似简单，但用户缩放页面时，像素值不会随字体等比缩放，图标容易“漂移”。而 transform: translateX() 基于自身尺寸计算，和字体大小联动更强。
更推荐写法：
- 把图标容器设为
width: 1em; height: 1em;（1em = 当前字体大小） - 用
right: 0.75em+transform: translateY(-50%)定位 - 这样缩放时图标大小、间距都随文本同步变化，不用额外 media query 适配
顺便提醒：em 单位依赖父元素 font-size，如果父容器没设字体大小，可能继承到意外值，建议显式控制。
Safari 下 input[type="search"] 的取消按钮残留问题
即使加了 -webkit-appearance: none，Safari 仍可能在聚焦后显示一个半透明的 × 按钮，覆盖在你的自定义图标上。这不是 bug，是它的默认行为。
必须显式清除：
input[type="search"]::-webkit-search-cancel-button { appearance: none; }- 或者更彻底：
input[type="search"]::-webkit-search-cancel-button { display: none; } - 注意：这个伪元素只在输入有内容且聚焦时存在，所以测试得输几个字再点进去看
另外，iOS Safari 的键盘“搜索”按钮文案不可改，这是系统级行为，CSS 无能为力——别在这儿浪费时间调样式。
伪元素画图标这事，看着小，但一旦涉及多端缩放、深色模式适配、高对比度设置，content 里塞 SVG data URL、用 background-color 做 fallback、监听 prefers-color-scheme 切换 fill 颜色……这些细节才是真卡点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
