Изменение CSS на отключенных выбранных элементах

Question

У меня есть форма с кодом, похожим на:

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

Который производит выпадающий как это:

Однако я хотел бы изменить цвет css отключенной выбранной записи (то, что видит пользователь при загрузке страницы - рисунок выше). Возможно ли это, и если да, то каким будет правильный вызов CSS?

Я посмотрел на подобные посты для IE здесь, которые упоминают:

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

но это не работает для меня (я использую Google Chrome).

Чтобы уточнить - я хотел бы изменить CSS, прежде чем пользователь нажимает и открывает раскрывающийся список.

Answer 1

Ваш CSS должен быть

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

Без места после option, Так должно работать лучше.

С пространством это относится к потомкам option,

Answer 2

Вы можете сделать это:

option[disabled=''] {
  color:red;
  background: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>

Answer 3

используйте ниже CSS для отключенной опции выбора

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>