Jump to content

Select dropdown arrow color


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...