如何使用W3.CSS将搜索图标放入文本输入框并右对齐

要把搜索图标嵌入输入框右侧，你需要用容器包裹输入框和图标，通过定位实现嵌入效果，具体代码调整如下：

<div class="w3-rel" style="width: 100%;">
  <input class="w3-input" type="text" placeholder="Search..." style="padding-right: 40px;">
  <i class="fa fa-search" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #999;"></i>
</div>

关键调整说明： #

• 用w3-rel（W3.CSS的相对定位类）包裹元素，让图标能基于这个容器做绝对定位
• 给输入框加padding-right: 40px，避免输入的文字和图标重叠
• 给图标设置绝对定位：right: 10px控制图标和输入框右侧的间距，top: 50%; transform: translateY(-50%)实现垂直居中，color可根据需求调整图标颜色

如果不想用内联样式，也可以把样式写到CSS类里：

.search-container {
  position: relative;
  width: 100%;
}
.search-input {
  padding-right: 40px !important;
}
.search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

对应的HTML：

<div class="search-container">
  <input class="w3-input search-input" type="text" placeholder="Search...">
  <i class="fa fa-search search-icon"></i>
</div>

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