How do I style form drop down lists?

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: