How to style Select dropdown with css only

CSS only select dropdown
I’ve been searching for a way to stylize a <select> drop down menu with only css. I’m working on a site that wont allow me to use any Javascript. My first choice would be to use jQuery but on this project the rule is, no jQuery!

I’ve come up with a solution that works in an acceptable way in styling the <select> dropdown relatively well across modern browsers. The one exception is Opera. Some more work will be needed to get this to work well in Opera as it does not like to take the background color when the dropdown is activated. For now I have simply made the text lightly gray so it will still be visible when Opera uses a white background on click.

What I have done is use a holder div that is shorter then the <select> dropdown and hides the overflow. Then I use an image of an arrow as a background. Its actually quite simple and works pretty well for my current needs. Give it a shot and see how it works for you. Any suggestions for improvement would be great, or any ideas as to how to get this to work in Opera.

There are some hacks for IE in this code. I would definitely pull them out into IE specific css files for production.

Demo of the dropdown »

In production in an ASP environment I experienced some visual issues in older Firefox and different version of IE. Any feedback would be greatly appreciated.

Here are some screen grabs of my css only dropdown.

How to style select dropdown with css only in Firefox
Firefox
How to style select dropdown with css only in Chrome
Chrome
How to style select dropdown with css only in IE8
IE8
How to style select dropdown with css only in IE6
IE6
Safari
How to style select dropdown with css only in Safari
How to style select dropdown with css only in Opera
Opera

- CSS / HTML CODE -

<html>
<head>
<title>CSS Style &#60;Select&#62; No Javascript</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

<style>
select { border:0; color:#EEE; background:transparent;
font-size:20px; font-weight:bold; padding:2px 10px; width:378px;
*width:350px; *background:#58B14C; -webkit-appearance: none;  }

#mainselection { overflow:hidden; width:350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url(“arrow.gif”) no-repeat scroll 319px 5px #58B14C; }
</style>

</head>
<body>
<div id=”mainselection”>
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</body>
</html>

- The Arrow -

  1. Dover says:

    Thoughts hmm? A tip, when it’s your own website, it’s not that hard to include a working example. The screenshots are an added bonus for those who are viewing in a browser that doesn’t display it.

    Most people don’t care enough to create a quick test page, and will move on to the jquery alternative. (We’ll just assume it photo shopped of course)

  2. Daniel says:

    Good point. I’ve added a link to a demo. Thanks for the tip.

  3. Thanks for this neat little trick. I just used it on a site that I am building where I work. Anywho, is there any chance you have any CSS only tricks for input checkboxes? I could really use some info on that.

  4. Jason says:

    This is much appreciated. This is exactly what I was looking for. Using them on my new project as we speak. Thanks a ton!

  5. Karsten says:

    This does not work in Chrome and Opera

  6. Emigdio says:

    -webkit-appearance: none; will fix the chrome transparent issue

  7. rubytree says:

    Add -webkit-apperance:none; to select to make it work in Chrome

  8. WtheM says:

    Thank you

  9. Housamz says:

    Thank you very much for this tutorial, it is really great! :D

    You missed an “a” in the last comment:
    -webkit-apperance:none;

    must be:
    -webkit-appearance:none;

  10. matt says:

    this did not work for me in chrome or IE. I’m using the exact code with the “-webkit-appearance:none;” addition. IE has no color and is not using the arrow. chrome looks like the standard dropdown. what am i missing?

  11. John says:

    Thanks much. This is eactly what I was looking for in a project I’m working on.

  12. Andrew Roberts says:

    This worked perfect, thanks!!

  13. Daniel says:

    I have updated the code to include -webkit-appearance: none;
    Thanks so much for the help.

  14. Klingon83 says:

    Is there a way to make this work in Opera?

    I would like to include it in a project, but I must support Opera.

    Thanks

  15. Ricard says:

    muuuuaaaaaaaa

  16. Alin Predoi says:

    This does not work with dir=”rtl”.

  17. worked says:

    Android + iOS?

  18. mickey says:

    Thank you so much

  19. Mike G says:

    In Chrome I was unable to get the options to reflect the background color until I discovered all it took was to add one more declaration.
    select option{
    background-color:#58B14C;
    }

    Thanks for the tutorial!!