有沒有辦法將材質圖標作爲輸入背景？

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">&#xE8B6;</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; 
}