獲取的下拉箭頭，在HTML選擇標籤

Question

我需要創建一個選擇框，看起來像這樣：

我的HTML：

<select class="addSelect"> 
    <option>Some Value</option> 
    <option>Some Value</option> 
    <option>Some Value</option> 
</select> 

我的無禮/ CSS：

.addSelect { 
    width: 100%; 
    background: #fff; 
    border: none; 
    @include border-radius(6px, 6px, 6px, 6px); 
    color: #9A9A9A; 
    @include appearance(none); 
    padding: 10px; 
    font-size: 16px; 
} 

所以我有這樣的東西到目前爲止：

非常接近我會說！ （當然不是顏色）。所以，我正在努力的是在那裏得到那個向下的小箭頭。當我說'出現：沒有'時，我有效地擺脫了那個下拉箭頭（儘管在鉻中它是一個向上和向下的箭頭）......任何提示？

Answer 1

您可以使用fontawosme圖標的絕對位置

.select{ 
 
    width:200px; 
 
} 
 
select{ 
 
    
 
    width: 100%; 
 
    height: 30px; 
 
    display: block; 
 
    appearance: none; 
 
    -webkit-appearance: none; 
 
    padding: 0 20px; 
 
    line-height: 30px; 
 
} 
 
.select:before { 
 
    content: "\f078"; 
 
    font-family: FontAwesome; 
 
    position: absolute; 
 
    z-index: 1; 
 
    right: 5px; 
 
    top: 6px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class='select'> 
 
    <select class="addSelect"> 
 
    <option>Some Value</option> 
 
    <option>Some Value</option> 
 
    <option>Some Value</option> 
 
    </select> 
 
</div>

Answer 2

您可以使用引導實現這一目標。他們有很多css可供你使用。這是非常容易設置和使用。使用引導程序，您可以在下拉菜單中獲取向上和向下箭頭。

http://getbootstrap.com/components/#dropdowns