推荐用包裹和图标并设position:relative/absolute，同步调整padding与box-sizing:border-box，用:focus-within控制图标状态，flex居中避免对齐误差。

用 <input> + <i></i> 或 <svg></svg> 组合实现图标输入框

纯 HTML 不支持原生带图标的输入框，必须靠 CSS 布局把图标“塞”进 <input> 容器里。最可靠的方式是用一个 <div> 包裹 <code><input> 和图标元素（<i></i> 或内联 <svg></svg>），再用 CSS 控制定位。

常见错误是直接在 <input> 里写 <i></i> —— 这无效，因为 <input> 是自闭合标签，无法嵌套内容。

• 推荐用 <svg></svg>：体积小、缩放不失真、无需额外字体加载
• 若用 Icon Font（如 Font Awesome），确保已引入对应 CSS，并用 <i class="fa fa-search"></i> 写法
• 图标容器（如 <span></span> 或 <i></i>）必须设 position: absolute，父容器 <div> 要设 <code>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 最轻量：

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载

  .input-wrapper:focus-within .icon {
    color: #007bff;
  }
  

  • :focus-within 作用于包裹容器，比给 <input> 单独写 :focus 更方便控制子图标样式
  • 避免用 :focus 直接改 <input> 的 padding —— 会触发重排，且图标定位易错位
  • 如果图标是 <svg></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。