獲取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