input框 左边有固定小图标的写法

要在input框的左边添加一个固定的小图标，可以使用CSS的background属性或者使用一个相邻的<span>元素来实现。以下是两种方法的示例代码：

方法1：使用背景图像

HTML:

<div class="input-container">
  <input type="text" class="input-with-icon" placeholder="Search...">
</div>

CSS:

.input-container {
  position: relative;
}
 
.input-with-icon {
  padding-left: 30px; /* 使input内容与图标有间隔 */
  background: url('path-to-your-icon.png') no-repeat;
  background-size: 20px; /* 根据图标大小调整 */
  background-position: left center; /* 定位图标 */
  background-repeat: no-repeat;
}

方法2：使用相邻的<span>元素

HTML:

<div class="input-container">
  <span class="icon"></span>
  <input type="text" class="input-with-icon" placeholder="Search...">
</div>

CSS:

.input-container {
  position: relative;
}
 
.icon {
  position: absolute;
  left: 5px; /* 或者你需要的间距 */
  top: 50%;
  transform: translateY(-50%);
  background: url('path-to-your-icon.png') no-repeat;
  background-size: 20px; /* 根据图标大小调整 */
  height: 20px; /* 根据图标大小调整 */
  width: 20px; /* 根据图标大小调整 */
}
 
.input-with-icon {
  padding-left: 30px; /* 使input内容与图标有间隔，这个值应该等于或大于图标宽度 */
}

这两种方法都可以实现在input框的左侧添加一个固定小图标的效果。选择哪种方法取决于你的具体需求和个人喜好。