获取的下拉箭头，在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