更改所选多选项目的颜色答案

【问题标题】：Change color of selected multiselect items更改所选多选项目的颜色
【发布时间】：2017-06-19 06:52:36
【问题描述】：

我在页面上有一个multiple select 元素：

<select multiple="multiple">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

它的选项颜色是黑色。但是当我选择一个选项时，它的颜色会变成白色。

如何使用 css 将所选选项的颜色更改为黑色（或我想要的其他颜色）？

我尝试过使用

select option:active
select option:checked
select option:focus
select option:hover

但他们没有做到这一点。

更新：这是我需要的 jsfiddle：https://jsfiddle.net/htshame/th3gesvv/4/

【问题讨论】：

@Pete 这里没有太多代码，如果我理解正确的话

标签： html css select colors multi-select

【解决方案1】：

我不知道如何仅在 CSS 中实现这一点，但我知道您可以使用 CSS 选择 selected 选项。

我的建议是使用 jQuery 更新 selected 选项的属性，然后更改 CSS 规则 [selected] 以放置您喜欢的背景颜色。

这是一个运行示例：

$(document).ready(function() {
$('select').change(function() {
   var selectedOption = $(this).find(':selected');
   selectedOption.attr('selected','selected');
}).change();
});

select{height: 200px; width: 300px;}
option {margin: 10px;}

[selected] {
    background-color: #0f0;
    font-weight:bold;
}

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<select multiple="multiple">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
  <option>Four</option>
  <option>Five</option>
</select>

【讨论】：

这不是我需要的行为。我希望当前选择的选项颜色为黑色。
你不能通过[selected] {background-color: #000;}得到它？
您的代码执行以下操作：我选择选项（背景颜色为深蓝色，选项文本颜色为白色）；我选择了另一个选项（此选项背景颜色为深蓝色，此选项文本颜色为白色），但之前选项的背景变为绿色。我想要以下行为：当我选择选项时（并且当它被选中时）它的背景保持原样的深蓝色，选项文本颜色应该是黑色（或其他颜色），但现在它是白色的。跨度>
当我更改为[selected] {background-color: #000;} 时，背景颜色会变成黑色，而不是选项的文本。
我已经用 jsfiddle 更新了我的问题，警报告诉我什么时候需要颜色为黑色。