How to Style Disabled Options in a Form

Styling disabled select (dropdown boxes) in HTML

In Internet Explorer 9, support will be added for the :disabled pseudo-selector (ref). I don't know whether that will honor the "color" property, but it seems likely.

In older versions of IE, you can adjust the background color (but not the color). Thus:

    <style type="text/css">
        select[disabled] { background-color: blue; }
    </style>

That works in IE 7 and IE 8. You still can't alter the foreground color, but you can change the background color to contrast more strongly with the gray that IE assigns it when it's disabled.

How to style the disabled and selected 'option' of a 'select' in HTML5

I think you need a little javascript:

HTML

<select onchange="highlight(this)">
    <option class="invalid" selected="selected" disabled="disabled">Choose best player...</option>
    <option>Walter Payton</option>
    <option>Jim McMahon</option>
    <option>Mike Singletary</option>
    <option>Richard Dent</option>
    <option>Steve McMichael</option>
    <option>Wilber Marshall</option>
</select>

CSS

option.invalid {
    background: #eee;
}

option.valid {
    background: #ff8;
}

JavaScript

function highlight(field){
    field.options[0].className = 'valid';
}

jsFiddle Demo.

Change the 'option' color with the attribute 'disabled'

Try this:

CSS:

    select{
    color:red;
    }
    option{
    color:black;
    }

---

Related Topics