Question

有没有办法在输入文件中放置材料图标作为右侧背景？

我知道我可以将图像作为输入文件背景放置，但素材图标不是图像，我认为它们是由字体创建的。

这是我正在尝试但没有运气

<input type="search" class="global-search"
       ng-model="vm.searchText"
       ng-keyup="$event.keyCode == 13 ? vm.search() : null"
       placeholder="I can help you to find anything you want!"/>

<a ng-click="vm.search()">
  <i class="material-icons global-search-icon">&#xE8B6;</i> <!--search-->
</a>

图标<i class="material-icons global-search-icon"></i>必须是<input type='text'/>

的背景图片

Answer 1

您可以将输入和图标包装在div中：

<div id="divWrapper">       
   <input type="search" class="global-search"
   ng-model="vm.searchText"
   ng-keyup="$event.keyCode == 13 ? vm.search() : null"
   placeholder="I can help you to find anything you want!"/>
   <i class="material-icons global-search-icon">&#xE8B6;</i>
</div>

并添加以下样式：

#divWrapper{
   display:inline;
   position: relative;
}

#divWrapper i {
   position: absolute;
   left: 0;
}

.global-search:focus + i{
   display: none;
}

有没有办法将材质图标作为输入背景？

1 个答案: