如何在input输入框的placeholder占位符中插入自定义图标？

原生<input>的placeholder属性仅支持纯文本，无法直接插入自定义图标DOM元素，可通过以下两种方案实现需求：

方案1：嵌套容器+图标固定（最常用，可直接复用现有图标代码） #

实现逻辑：给input外层套相对定位的容器，将图标绝对定位在输入框内部左侧，给input加左侧内边距避免输入内容遮挡图标，图标会一直显示在输入框左侧。
改造后代码：

<form action="" onSubmit={onSubmit}>
  {/* 父容器相对定位，宽度和原输入框保持一致 */}
  <div className="relative" style={{ width: 301 }}>
    {/* 搜索图标垂直居中固定在左侧 */}
    <span className="flex border-0 absolute left-3 top-1/2 -translate-y-1/2 z-10">
      <img src={SearchIcon} alt="搜索" />
    </span>
    <input
      ref={inputEl}
      type="text"
      className="py-1 border-0 rounded-sm flex-1 placeholder-base-6 pl-10" 
      placeholder="Search app by name, type, or category"
      style={{
        width: '100%',
        height: 44,
        background: 'rgba(235, 236, 239, 0.7)',
      }}
      value={isSearch}
      onChange={(e) => setIsSearch(e.target.value)}
    />
  </div>
</form>

如果需要图标和占位符一样，用户输入内容后自动隐藏，只需要给图标加显隐判断即可：

{!isSearch && <span className="flex border-0 absolute left-3 top-1/2 -translate-y-1/2 z-10">
  <img src={SearchIcon} alt="搜索" />
</span>}

方案2：CSS背景图实现（无需额外DOM元素） #

如果你的搜索图标是可直接访问的静态资源，也可以直接把图标设为输入框的背景图实现效果：

<input
  ref={inputEl}
  type="text"
  className="py-1 border-0 rounded-sm flex-1 placeholder-base-6"
  placeholder="Search app by name, type, or category"
  style={{
    width: 301,
    height: 44,
    background: 'rgba(235, 236, 239, 0.7) url(替换为你的SearchIcon静态资源路径) 12px center no-repeat',
    paddingLeft: '40px',
    backgroundSize: '16px 16px', // 可根据需求调整图标大小
  }}
  value={isSearch}
  onChange={(e) => setIsSearch(e.target.value)}
/>

内容的提问来源于stack exchange，提问作者NicoGulo