Get dropdown arrow on HTML select tag

Question

I need to create a select box that looks like this:

My Html:

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

My 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;
}

So I have something like this so far:

Pretty close I'd say! (Not the colours yet of course). So, what I'm struggling with is getting that little downward facing arrow in there. When I said 'appearance: none' I effectively got rid of that dropdown arrow.. (though in chrome it was an upward AND downward facing arrow)... Any tips?

Answer 1

you can achieve this using fontawosme icons an absolute position

 .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

You could use Bootstrap. They have a ton of css ready for you to use. It is really easy to setup and use. With bootstrap you can get the arrow Up and Down in your dropdown.

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