Change color and appearance of drop down arrow

Question

I want to change the default appearance of the arrow of a dropdown list so that looks the same across browsers. Is there a way to override the default look and feel of the drop down arrow using CSS or otherwise ?

Answer 1

The <select> element is generated by the application and styling is not part of the CSS/HTML spec.

You would have to fake it with your own DIV and overlay it on top of the existing one, or build your own control emulating the same functionality.

Answer 2

You can acheive this with CSS but you are not techinically changing the arrow itself.

In this example I am actually hiding the default arrow and displaying my own arrow instead.

HTML:

<div class="styleSelect">
  <select class="units">
    <option value="Metres">Metres</option>
    <option value="Feet">Feet</option>
    <option value="Fathoms">Fathoms</option>
  </select>
</div>

CSS:

.styleSelect select {
  background: transparent;
  width: 168px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  color: #000;
}

.styleSelect {
  width: 140px;
  height: 34px;
  overflow: hidden;
  background: url("images/downArrow.png") no-repeat right #fff;
  border: 2px solid #000;
}

Answer 3

No, you can't do it by using an actual <select>, but there are techniques that allow you to "replace" them with javascript solutions that look better.

Here's a good article on the topic: <select> Something New