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

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: 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.