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.
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.
- Firefox
- Chrome
- IE8
- IE6
- How to style select dropdown with css only in Safari
- Opera
– CSS / HTML CODE –
<html>
<head>
<title>CSS Style <Select> 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>
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)
Good point Dover. I’ve added a link to a demo. Thanks for the tip.
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.
This is much appreciated. This is exactly what I was looking for. Using them on my new project as we speak. Thanks a ton!
This does not work in Chrome and Opera
-webkit-appearance: none; will fix the chrome transparent issue
Add -webkit-apperance:none; to select to make it work in Chrome
Thank you
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;
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?
Thanks much. This is eactly what I was looking for in a project I’m working on.
This worked perfect, thanks!!