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

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.

.styleSelect select {    background: transparent;    width: 168px;    padding: 5px;    font-size: 16px;    line-height: 1;    border: 0;    border-radius: 0;    height: 34px;    -webkit-appearance: none;    -moz-appearance: none;    appearance: none;    color: #000;  }    .styleSelect {    width: 140px;    height: 34px;    overflow: hidden;    background: url("images/downArrow.png") no-repeat right #fff;    border: 2px solid #000;  }

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