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 p

Answer 1

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

Answer 2

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 3

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 4

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 5

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 6

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.