关闭下拉框后更改 <select> 背景颜色答案

【问题标题】：Changing <select> background colour after closing drop down box关闭下拉框后更改 <select> 背景颜色
【发布时间】：2018-06-28 17:01:41
【问题描述】：

我找到了一些很好的解决方案来改变下拉框中项目的颜色：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
            select option:hover,
            select option:focus,
            select option:active {
                background-color: lightpink !important; /* for IE */
                color: #ffed00 !important;
            }

            select option:checked {
                background-color: green !important; /* for IE */
                color: #000000 !important;
            }
        </style>
    </head>
    <body>
        <select>
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
            <option>Item 4</option>
        </select>
    </body>
    </html>

这适用于下拉框（确实有些奇怪的颜色）：

选择后，突出显示的项目的背景仍然默认为蓝色：

我还能做些什么来改变这种颜色？

【问题讨论】：

标签： html css drop-down-menu highlight

【解决方案1】：

将所选<option> 的规则也应用于<select> 标记（例如：select option:checked, select）。

【讨论】：

【解决方案2】：

以下方法可以解决您的问题，我已经更改了您的 CSS。除了为option 更改背景之外，我还在为select 更改背景。

select,
select option:hover,
select option:focus,
select option:active {
  background-color: lightpink !important;
  /* for IE */
  color: #ffed00 !important;
}

select option:checked {
  background-color: green !important;
  /* for IE */
  color: #000000 !important;
}

select,
select option:hover,
select option:focus,
select option:active {
  background-color: lightpink !important;
  /* for IE */
  color: #ffed00 !important;
}

select option:checked {
  background-color: green !important;
  /* for IE */
  color: #000000 !important;
}

<select>
  <option>Item 1</option>
  <option>Item 2</option>
  <option>Item 3</option>
  <option>Item 4</option>
</select>

【讨论】：

【解决方案3】：

嗯，我的印象是这是不可能的。不同的浏览器有非常不同的行为。

这是火狐：

（不是我想要的悬停或选择颜色）

在Edge中，下拉框打开时是可以的，但是之后背景是默认的蓝色：

（IE 11 具有相同的行为）

Chrome 看起来还不错，但忽略了悬停颜色：

【讨论】：