Javascript 在“选择”选项中为选定项目设置背景色（多个）

我正在尝试更改列表框中所选项目的背景色（选择多个选项）

我试着用css。。。我试着用JavaScript。。。使用jquery。。。我真的不知道会发生什么！！但我找不到答案：u（

---

我在这个论坛上读到了至少10个问题。我尝试了所有建议的解决方案，但我只能更改完整列表的背景…而不是所选项目。我发现的唯一方法是使用带有可点击列表项目的无序列表，而不是我的选择选项…但我正在使用一个表单，我想向服务器发送se以传统方式选择项目。

这将更改所选选项的背景色

$('select').change(function() {
    $('option').css('background', 'none');
    $('option:selected').css('backgroundColor', 'red');
}).change();

---

检查处的工作示例，它看起来不想玩球：

<style>

::selection {
   background: #FF0000; /* Safari */
   }
::-moz-selection {
   background: #FF0000; /* Firefox */
}
</style>

<select multiple="true">
<option><span style="background:FF0000;">One</span></option>
<option>Two</option>
<option>Three</option>
</select>

<p>This is text.</p>

：：选择{
背景：#FF0000；/*狩猎*/
}
：-moz选择{
背景：#FF0000；/*Firefox*/
}
一个
两个
三
这是文本

这一点我并不感到惊讶。根据我的经验，小部件通常抵制这种样式。像侯赛因的方法一样，滚动自己的小部件似乎是唯一的出路。

JavaScript

---

欢迎这样做。请编辑您的问题并添加一些代码，以便我们可以看到您尝试了什么？选择颜色是操作系统的首选项。我认为这是不可能的，尽管我可能错了。您可以在大多数浏览器中的选项元素上设置样式属性，但在较旧的IE版本中不可以。IE8呢？只有在ff和chrome上，您的脚本才能在I上正常工作E8不工作。@mcmwhfy IE8有什么问题？错误？在IE8上，选择保留在选择框中，而不在列表（标记）中。@mcmwhfy您能举一个它不工作的例子吗？检查此打印屏幕：

document.getElementById('your-select').onchange = function() {

    var options = this.getElementsByTagName('option'),
        selectedClassName = 'selected';

    for (var i = 0, length = options.length; i < length; i++) {
        var option = options[i],
            className = option.className;

        if (i == this.selectedIndex) {
            option.className += selectedClassName;
        } else {
            option.className = (' ' + className + ' ').replace(new RegExp('\\s' + selectedClassName + '\\s'), '');
        }
    }
};

#your-select option.selected {
    background: red;   
}