获取HTML选择标签上的下拉箭头

Question

我需要创建一个如下所示的选择框：

我的HTML：

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

我的Sass / 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;
}

所以到目前为止，我有这样的事情：

我会说非常接近！ （当然还没有颜色）。 所以，我正在努力的是在那儿得到那个向下的小箭头。 当我说“外观：无”时，我实际上摆脱了该下拉箭头。（尽管在chrome中，它是一个向上和向下的箭头）...有什么提示吗？

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

您可以使用Bootstrap。 他们有大量的CSS准备供您使用。 它真的很容易设置和使用。 使用引导程序，您可以在下拉菜单中获得向上和向下箭头。

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