Question

        select {
            border: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            appearance: none;
            background: url('/drop.png') no-repeat;
        }
        option {
            background-color:#13814F;

        }

Relatively straightforward issue–in the above case, the background color of every option (including the selected one) overlaps the background image of the select box. Transparency isn’t an issue with the image.

As a side-note, what’s the most modern or easy to use plugin for styling select boxes with jquery? I’m trying to do without but slowly losing my patience.

Answer 1

According to http://msdn.microsoft.com/en-us/library/ms535877%28v=VS.85%29.aspx what you want to do with CSS cannot be done in IE. It states of the option element:

“Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing SELECT element as a whole.”