How do I style form drop down lists? - css

Question

I have searched far and wide on the Internet but have not found anything helpful regarding how to style the dropdown portion of a dropdown list in a form. I would appreciate a pointer in the right direction. Thanks.

Answer 1

I've been working on the same problem for a while. Came up with a pretty simple solution using a holder div that is shorter then the dropdown itself. I also use a background image to get the dropdowns arrow to look the way I like. Check it out http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/
All you need is a div around the select tag and 2 CSS classes.
HTML:
<div class="mainselection">
<select name="State" id="input7">
<option></option>
<option value="Alabama">Alabama</option>
...
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</div>
CSS:
.mainselection {
overflow:hidden;
width:350px;
margin-left:35px;
background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px;
/* dropdown_arrow.png is a 31x28 image */
}
select {
border:0;
background:transparent;
height:32px;
border:1px solid #d8d8d8;
width:350px;
-webkit-appearance: none;
}
Then after a little Javascript verification, I can also switch the class on the div to .dropdownbad to give it a red border.
.dropdownbad {
border:2px solid #c13339;
}
The default and error states are shown here:

Answer 2

You can apply styles using the SELECT selector or applying a classname to a SELECT element. However, you'll run into issues with IE < 8 applying things like borders to the element.
You can then target options by using the OPTION selector.
SELECT { border: solid 1px red; font-weight: bold; }
OPTION { background:green; font-style: italic; }
Should give you a drop down with a red border (if using FF or IE8 in Standards mode) with bold text, and the options should be italic with a green background.

Answer 3

Check out this website for CSS only solution:
http://www.htmllion.com/default-select-dropdown-style-just-css.html
HTML:
<form>
<select>
<option>CSS</option>
<option>HTML </option>
<option>HTML 5</option>
</select>
</form>
CSS:
<style>
select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: #0088cc url(img/select-arrow.png) no-repeat 90% center;
width: 100px; /*Width of select dropdown to give space for arrow image*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
color: #FFF;
border-radius: 15px;
padding: 5px;
box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
}
</style>

Answer 4

Its possible, but convoluted to say the least. You can't actually style the drop down portion of a drop down list consistantly across different browsers as they all support them in different ways (I mean really varied support).
When I had a problam like this a few months ago, the only solution I found was to, using javascript, convert the drop down list into a ul/li drop down menu, which I could style. Of course there are numerous event that need handling, like selecting a value.
Luckly there's a plugin for JQuery that allows this be a trivial task. (The given Brainfault link for this plugin isn't working anymore.)

Answer 5

As mentioned above it's pretty much impossible to do using straight html, I have had good results with jQuery Combobox though.

Answer 6

Since this question was asked, browser technology has far improved. You can now create a custom dropdown menu entirely using CSS with no javascript.
Check out this blog post:
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Answer 7

I have dropdowns in my cart that were light gray if not selected. I was able to turn the text black with this:
#customer_details ul {
color: black !important;
}
That was all I needed to change, so I can't say what else you could do.