推荐用<div>包裹<input>和<svg>图标并设position:relative/absolute，同步调整padding与box-sizing:border-box，用:focus-within控制图标状态，flex居中避免对齐误差。
用 <input> + <i> 或 <svg> 组合实现图标输入框
纯 HTML 不支持原生带图标的输入框，必须靠 CSS 布局把图标“塞”进 <input> 容器里。最可靠的方式是用一个 <div> 包裹 <input> 和图标元素（<i> 或内联 <svg>），再用 CSS 控制定位。
常见错误是直接在 <input> 里写 <i> —— 这无效，因为 <input> 是自闭合标签，无法嵌套内容。
- 推荐用
<svg>：体积小、缩放不失真、无需额外字体加载 - 若用 Icon Font（如 Font Awesome），确保已引入对应 CSS，并用
<i class="fa fa-search"></i>写法 - 图标容器（如
<span>或<i>）必须设position: absolute，父容器<div>要设position: relative
padding 和 box-sizing 必须同步调整
加了图标后，如果只给 <input> 设 padding-left，但没考虑图标宽度，文字会和图标重叠；或者光调 padding 却忽略 box-sizing: border-box，会导致整体宽度超出预期。
- 输入框左右
padding要预留图标空间，例如图标宽 20px，就设padding-left: 40px（留出间距） - 务必写
box-sizing: border-box，否则width: 100%会因 padding 叠加变宽 - 图标本身用
left: 12px（非margin-left）精确定位，避免影响流式布局
聚焦时图标颜色/位置要响应变化
用户点击输入框时，图标常需高亮或微调位置（比如向左收一点），这得靠 :focus-within 或 JS 监听 focus/blur。用 :focus-within 最轻量：
立即学习“前端免费学习笔记（深入）”；
.input-wrapper:focus-within .icon {
color: #007bff;
}
-
:focus-within作用于包裹容器，比给<input>单独写:focus更方便控制子图标样式 - 避免用
:focus直接改<input>的padding—— 会触发重排，且图标定位易错位 - 如果图标是
<svg>，可直接在 CSS 里改fill；若是字体图标，改color即可
移动端点击区域和图标可点击性容易被忽略
小图标在手机上难点中，而且默认图标不是可交互元素，用户可能误以为它能清空输入内容或触发搜索。
- 给图标容器加
pointer-events: none（防止干扰 input 聚焦），除非你真要让它可点击 - 如需点击图标清空内容，得用 JS 绑定
click，并设pointer-events: auto，同时加cursor: pointer - 移动端建议图标最小尺寸 ≥ 44×44px，可用
min-width/min-height+padding扩展热区，不放大 SVG 本身
真正麻烦的是图标与输入框边框的对齐精度——不同浏览器对 height、line-height、vertical-align 解析不一致，最好用 flex 布局居中，而不是依赖 vertical-align: middle。
