在禁用的选定元素上更改 CSS答案

【问题标题】：Changing CSS on disabled selected elements在禁用的选定元素上更改 CSS
【发布时间】：2018-04-28 20:11:30
【问题描述】：

我有一个代码类似于：

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

【问题讨论】：

标签： css forms dropdown disabled-input

【解决方案1】：

你的 CSS 必须是

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

option 后面没有空格。这样应该会更好。

加上空格，它适用于option的后代。

【讨论】：

ha 已删除的帖子似乎效果更好 - 伪类 :disabled 可以在 ie 上工作，因为这不起作用：jsfiddle.net/o7rmzn2s/1
为了更好的兼容性，你可以同时做：select option[disabled], select option:disabled
您好，感谢您的评论，我正在寻找对现有下拉列表的 CSS 更改（在用户单击它之前）。我已经尝试过这段代码，但它只会在打开下拉列表后更改禁用的条目。有没有办法在用户点击并打开菜单之前改变它？
@Beep 我认为 chrome 的自然行为是仅在您开始将鼠标悬停在下拉列表时才应用任何样式，如果您想正确设置选择样式，则需要使用某种 js 插件因为selects 的实际样式非常有限

【解决方案2】：

使用下面的 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>

【讨论】：