更改所选多项目的颜色

Question

我在页面上有一个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

但是他们没有做到这一点。

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

Answer 1

我不知道如何在CSS 中实现，但我知道您可以使用CSS选择选择的选项。

我的建议是使用jQuery更新所选选项的属性，然后更改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>