Question

我找到了一些好的方法来更改下拉框中项目的颜色： <！DOCTYPE html> <头> <样式> 选择选项：悬停，选择选项：焦点，选择选项：有效{ 背景色：lightpink！important; / *对于IE * / 颜色：＃ffed00！important; } 选择选项：选中{ 背景色：绿色！重要； / *对于IE * / 颜色：＃000000！重要; } <身体> <选择> 对于下拉框（确实有些奇怪的颜色），这很好用：选择后，突出显示的项目的背景仍然保持蓝色，因为默认情况下是：我也可以更改此颜色吗？

Answer 1

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

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

Answer 3

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

这是Firefox：

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

在Edge中，打开下拉列表就可以，但是之后，背景具有默认的蓝色：

（IE 11具有相同的行为）

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

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

3 个答案: