用fa-icon替換選擇下拉箭頭

Question

我試圖用fa-icon（V形圈 - 下拉）替換選擇下拉箭頭，但我只能發現可以用css文件中的圖像替換背景。我可以在選擇圖標上添加圖標，但不會點擊。任何幫助我如何在選擇下拉列表中使用字體圖標？

Answer 1

因爲您不能使用pseudo-elements而不是<select>您可以在label上使用它們。使用

：

-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 

將隱藏默認down arrow的select有，而是使用fa-chevron-circle-down圖標與它的unicode的\f13a作爲應用於label

的:after僞元素它不是一個真正的'美麗'的解決方案，但它的竅門

讓我知道它是否有幫助

參見下面的代碼片段

label.wrap { 
 
    width:200px; 
 
    overflow: hidden; 
 
    height: 50px;  
 
    position: relative; 
 
    display: block; 
 
    border:2px solid blue; 
 
} 
 

 
select.dropdown{  
 
    height: 50px; 
 
    padding: 10px; 
 
    border: 0; 
 
    font-size: 15px;  
 
    width: 200px; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
} 
 
label.wrap:after { 
 
    content:"\f13a "; 
 
    font-family: FontAwesome; 
 
    color: #000; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 18px; 
 
    z-index: 1; 
 
    width: 10%; 
 
    height: 100%; 
 
    pointer-events: none;  
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<label class="wrap"> 
 
    <select class="dropdown"> 
 
     <option>Option 1</option> 
 
     <option>Option 2</option> 
 
     <option>Option 3</option> 
 
    </select> 
 
</label>