如何在input文本输入框中添加左侧搜索图标与右侧麦克风图标

修改步骤 #

• HTML部分新增麦克风图标元素
• CSS部分补充图标垂直居中规则、输入框内边距规则、麦克风图标定位规则

修改后完整代码 #

HTML

<!--Search Bar-->
<div class="search-bar">
  <i class="fa-solid fa-magnifying-glass search-ico"></i>
  <input type="text" name="search" placeholder="Search" />
  <i class="fa-solid fa-microphone mic-ico"></i>
</div>

CSS

.search-bar {
  width: 20%;
  position: relative;
  display: flex;
  align-items: center;
}

.search-bar input {
  width: 100%;
  height: 30px;
  /* 若需要输入文字居中可保留text-align: center，同时可适当增大左右padding值避免文字覆盖图标 */
  text-align: left;
  padding: 0 35px;
  border: none;
  border-radius: 18px;
  outline: none;
}

.search-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

.mic-ico {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  cursor: pointer;
}

说明 #

• 所有图标默认垂直居中，输入框高度调整时不需要额外修改图标位置
• 输入框的左右padding值可以根据图标大小自行调整，避免输入文字和图标重叠
• 请确保已正确引入Font Awesome图标库资源，否则图标无法正常渲染

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