在禁用的所选元素上更改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>