Select dropdown arrow color

[TheWizEd]

Is there a way to change the color of the dropdown arrow on the right of a select element?

[Ingolme]

No, it's not even consistent among different browsers.

 

A technique I've done to customize the dropdown arrow is to set the appearance to "none" and then set a background image as the arrow.

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #CCC;
  border-radius: 4px;
  padding-right: 32px;
  background: url(arrow.png) right no-repeat;
}

There are other possible solutions. You could use the ::after pseudo-element to make a CSS triangle.

[dsonesuk]

I have done it with image for the whole select box and arrow, NOT the options, by hiding it with opacity: 0;background image behind it, with span covering the select text box area, the option are not affected by opacity applied to select element, when you click what you think is image, you are actually clicking the select element, this causes the options to show. When you make a selection, JavaScript/jquery is used to copy the option selected text to the span, which can be styled as you want.

 

You can also get combined dropdown js, css, that will convert your ordinary plain dropdown to an unordered list, very much how it is used for a menu, you can then style it as you wish, the select element and options are hidden from view, but again are updated using js/jquery to the selection of options made.