Changing CSS on disabled selected elements

Question

I have a form with code similar to:

<form class="eng-select" action="action.php" method="POST">
    <select name="position">
        <option value="disabled" disabled selected>Engineer</option>
        <option value="entry-1">John Doe</option>
        <option value="entry-2">David Smith</option>
        <option value="entry-3">Michael Silk</option>
    </select>
</form>

Which produces a dropdown like this:

dropdown field

However I would like to change the css color of the disabled selected entry (what the user sees when they load the page - the picture above). Is this possible, and if so what would the proper CSS call be?

I have looked at similar posts for IE here that mention:

select option [disabled] { background-color: blue; }

but this does not work for me (I am using Google Chrome).

To clarify - I would like to change the CSS before the user clicks and opens the dropdown box.

score 1 · Answer 1 · answered Nov 15 '17 at 14:39

1

Your CSS must be

select option[disabled] { background-color: blue; }

Without the space after option. It should work better this way.

With the space, it applies to descendants of the option.

answered Nov 15 '17 at 14:39

Fabien Ménager

140,109
3
41
60

ha the deleted post seems to work better - the pseudo-class `:disabled` works on ie where as this doesn't: https://jsfiddle.net/o7rmzn2s/1/ – Pete Nov 15 '17 at 14:43
1

For more compatibility, you may do both : `select option[disabled], select option:disabled` – Fabien Ménager Nov 15 '17 at 14:48
Hey thanks for the comment, I'm looking for CSS changes to the existing dropdown (before the user has clicked it). I've tried this code but it only changes the disabled entry after the dropdown is opened. Is there a way to change it before the user clicks and opens the menu? – Beep Nov 15 '17 at 14:48
@Beep I think the natural behaviour of chrome is to only apply any styling once you start hovering the drop down, if you want to properly style a select, you will need to use some sort of js plugin as `select`s are very limited in what you can actually style – Pete Nov 15 '17 at 14:50

score 0 · Answer 2 · answered Nov 15 '17 at 14:58

use below css for disabled select option

select option:disabled {
   background-color: blue;
}

<form class="eng-select" action="action.php" method="POST">
    <select name="position">
        <option value="disabled" disabled selected>Engineer</option>
        <option value="entry-1">John Doe</option>
        <option value="entry-2">David Smith</option>
        <option value="entry-3">Michael Silk</option>
    </select>
</form>

Changing CSS on disabled selected elements

2 Answers2