应使用 CSS background-image 或 div 包裹方案实现输入框图标；input 是自闭合标签，不可嵌套 img；伪元素对 input 不可靠。
input 里直接放 <img> 会错位，别硬塞
HTML 的 <input> 是自闭合标签，不能嵌套任何内容（包括 <img> 或 <i>）。强行写成 <input><img src="icon.svg"></input> 浏览器会自动忽略闭合标签，图标也不会显示在输入框内部。
用 CSS 的 background-image 最稳妥
这是最常用、兼容性最好、也最容易控制位置的方式。把图标当背景图铺在 <input> 左侧或右侧，再用 padding 留出空间避免文字遮挡。
实操要点：
- 给
<input>设置background-image: url("search.svg"); - 用
background-position: 10px center;控制图标水平偏移（比如左侧留 10px） - 必须加
background-repeat: no-repeat;，否则图标会平铺 - 加
padding-left: 32px;（比图标宽略大），确保文字不盖住图标 - 如果要适配暗色模式，可配合
@media (prefers-color-scheme: dark)换深色图标
input.search {
background-image: url("search.svg");
background-repeat: no-repeat;
background-position: 10px center;
padding-left: 32px;
background-size: 16px;
}
用 <div> 包裹实现更灵活的图标定位
当需要图标可点击、带 hover 效果、或图标在右侧（比如清空按钮），纯 background 就不够用了。这时把 <input> 和图标放在同一个容器里，用 flex 布局对齐。
立即学习“前端免费学习笔记（深入）”；
常见组合结构：
- 外层
<div class="input-with-icon"> - 里面并排放
<input type="text">和<svg>或<img> - 用
display: flex;+align-items: center;垂直居中 - 给图标加
margin-left: 8px;或margin-right: 8px;控制间距 - 注意设置
input的flex: 1;，让它自动撑满剩余空间
<div class="input-with-icon"> <input type="text" placeholder="搜索..."> <svg width="16" height="16">...</svg> </div>
用伪元素 ::before 或 ::after 插图标要小心
虽然可以用 input::before 加图标，但绝大多数浏览器不支持对 <input> 使用伪元素（因为它是替换元素，没有文档树子节点）。Chrome/Firefox 都会忽略它，只有部分旧版 Safari 表现不一——这属于不可靠方案，线上项目请绕开。
如果你看到别人这么写了还能显示，大概率是他们实际用的是 <input> 的父容器（比如 div.input-wrapper::before），而不是直接作用在 input 上。
真正要注意的细节：图标尺寸和行高要匹配，background-size 和 padding 必须同步调；如果用 SVG，优先内联或 base64，避免额外请求；移动端记得测试点击热区是否足够大。
