在“选择选项”（多选）中为所选项目设置背景颜色

Question

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

我尝试使用CSS、JavaScript和jQuery，但是我真的不知道发生了什么！但是我无法找到答案 :_(。

我在这个论坛上至少读了10个问题。我尝试了所有提出的解决方案，但我只能更改整个列表的背景，而不能更改所选项目的背景。我唯一找到的方法是使用可点击的列表项的无序列表，而不是我的select-option... 但我正在使用一个表单，并且想以传统方式将所选项目发送到服务器。

- Carolina

---

欢迎来到 SO。请编辑您的问题并添加一些代码，以便我们可以看到您尝试了什么？ - naveen

选择颜色是操作系统的偏好设置。 - David

我不认为这是可能的，虽然我可能错了。 - Nikolay Yordanov

大多数浏览器都支持在选项元素上设置样式属性，但在较旧的IE版本中不支持。 - kennebec

Answer 1

这将改变所选选项的背景颜色

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

请查看工作示例，网址为http://jsfiddle.net/TxbVt/1/

- Hussein

Answer 2

看起来它不想合作：

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

这并不让我感到惊讶。根据我的经验，小部件通常对这样的样式变化有抵触情绪。像Hussein的方法一样自己编写似乎是你唯一的出路。

- Oliver Moran

Answer 3

JavaScript

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'), '');
        }
    }
};

jsFiddle.

CSS

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

- alex

---

IE8怎么办？只有在FF和Chrome上运行良好，您的脚本在IE8上无法工作。 - mcmwhfy

@mcmwhfy IE8有什么问题吗？出现了错误吗？ - alex

在IE8中，选择仍然保留在选择框中，而不是列表（<option>标签）中。 - mcmwhfy

@mcmwhfy 你能否在 http://jsfiddle.net 上提供一个它无法工作的示例？ - alex

请检查此打印屏幕：http://postimage.org/image/lrj00um9n/ - mcmwhfy

这是一个 fiddle 示例：http://jsfiddle.net/TxbVt/486/ - mcmwhfy