更改 <select multiple> 中选定选项的颜色 [重复]答案

【问题标题】：Change Color of Selected Option in <select multiple> [duplicate]更改 <select multiple> 中选定选项的颜色 [重复]
【发布时间】：2018-05-31 15:13:46
【问题描述】：

我遇到了这个问题，我需要在单击/选择时更改一个/多个选项元素的颜色。单击时默认颜色为蓝色，我相信我们现在应该有一个解决方案，因为我尝试搜索解决方案但无济于事。希望在 CSS 或 vanilla JS 中做到这一点。没有库或框架。

Link to sample code

【问题讨论】：

标签： javascript css html

【解决方案1】：

select[multiple]:focus option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}

<select multiple>
  <option value="1">one</option>
  <option value="2" selected>two</option>
  <option value="3">three</option>
</select>

【讨论】：

不错！什么是操作系统/浏览器/设备支持？
另外，任何解释为什么这似乎需要background: red linear-gradient(0deg, red 0%, red 100%)？（background: red 似乎并不能解决问题，至少在 Chrome 中是这样。）
其实你只需要background-image: linear-gradient(0deg, red 0%, red 100%);。您无法更改背景颜色，因为它是由浏览器使用!important 设置的。但设置背景图片有效。
失焦时有没有办法改变所选项目的文本颜色和背景颜色？