styling a disabled combobox in internet explorer

Question

Say I had the following:

<select disabled="disabled" style="border: 1px red solid; color: black;">
<option>ABC</option>
</select>

Firefox renders the above with a red border and black text as I expect; but IE does not, it seems to be using native colors for the border and the disabled text. Is there any way for me to be able to style it?

For edit boxes my workaround was to use readOnly instead of disabled so that I can style it, but it seems for combo boxes the readOnly attribute has no effect.

Note: I only need this to work in IE (it's for an intranet webapp where users must use IE), so IE-specific solutions are fine.

Answer 1

One possibility could be... Draw your combo box with in a 1 X 1 table and width equals to that of combo box and combo box width = 100%.. cellpadding=0, cellspacing=0... then draw your desired border around that table.

Answer 2

To a good approximation, you can't style comboboxes at all; they're not "real" browser objects. See here for more explanation, and a possible workaround: http://stackoverflow.com/questions/1072239/is-it-possible-to-style-a-select-box

Alternatively, if you just want to put borders on it, wrap it in a span, and border that.

<span class="disabled-select">
    <select disabled="disabled">
        <option>ABC</option>
    </select>
</span>

with

span.disabled-select {
    border: 1px solid red;
}

Most other properties, like color, etc, probably won't have an effect, though.

Answer 3

Your best option is to use javascript to control the items, I included a few scripts below:

• http://info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/

• http://brilliantretail.com/cases/select/

• http://www.emblematiq.com/projects/niceforms/

I've only ever used the first, but I hope they meet your needs.