選択ドロップダウン矢印をファーアイコンに置き換えます

Question

選択ドロップダウン矢印をファーアイコン（シェブロンサークル）で置き換えようとしていますが、バックグラウンドをCSSファイルの画像に置き換えることができます。私は、選択肢の上にアイコンを追加することができますが、それはclickable.Anyドロップダウンリストでどのようにフォントアイコンを使用するヘルプはありませんか？

Answer 1

pseudo-elementsを<select>に送信すると、代わりにlabelで使用します。使用

：

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

はデフォルトdown arrowselectが持っていると:after擬似要素は、それは本当にありませんlabel

に適用される代わりに、あなたはそれでfa-chevron-circle-downアイコンを使用ユニコード\f13aだが非表示になります'美しい'解決策ですが、それはやります

私が助けてくれたら教えてください

は、下記を参照して、コードを表示

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>