更改“多选”下拉框中所选项目的背景颜色？ [复制]答案

【问题标题】：Change background color of selected items in "multiselect" dropdown box? [duplicate]更改“多选”下拉框中所选项目的背景颜色？ [复制]
【发布时间】：2012-11-11 00:47:00
【问题描述】：

我想为多选下拉框中的选定项目赋予黄色。默认情况下，选择后它具有灰色背景，如何在HTML、CSS 中执行此操作。

这个问题是关于 multiselect 但对于单选参考（相关但不重复）：How to apply background-color to a selected option?

【问题讨论】：

标签： css multi-select html.dropdownlistfor

【解决方案1】：

我们可以简单地借助下面的 CSS：

select option:checked{
  background: #1aab8e -webkit-linear-gradient(bottom, #1aab8e 0%, #1aab8e 100%);
}

【讨论】：

有谁知道为什么会这样，但背景：#1aab8e;没有？

【解决方案2】：

<style>
     .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: inherit;
        color: lightgray;
    }
</style>

在块中添加您自己的样式。

【讨论】：

【解决方案3】：

我们可以使用 JS 来选择 DOM。

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

<select>
    <option>1111111</option>
    <option>222222222</option>
    <option>33333333</option>
    <option>44444444</option>
</select>

演示：http://jsfiddle.net/TxbVt/1/

【讨论】：

【解决方案4】：

以下应该可以工作（对于允许样式选项标签的浏览器），但是在大多数情况下默认的选择样式将被覆盖。但是，您也许可以找到一种禁用此功能的方法：

css

select option.selected {
  font-weight: bold;
  color: red;
}

javascript

function highlight_options(field){
  var i,c;
  for(i in field.options){
    (c=field.options[i]).className=c.selected?'selected':'';
  }
}

标记

<select onchange="highlight_options(this)" multiple="multiple">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

【讨论】：

@VicKyAmr 是的，不幸的是，正如我所说。从外观上看，您无法删除它……至少据我所知。这一切都是因为高亮不是选项元素的属性，它是顶部的一层。但是，您仍然可以影响未被覆盖的样式……例如边框和填充。您还可以将样式和背景图像应用到未选择的选项中，以使它们更具吸引力。

【解决方案5】：

纯 CSS 在这里会有所帮助：

option:checked

【讨论】：

【解决方案6】：

你不能。 <option> 元素不接受 CSS 样式。

您可以使用基于 JavaScript 的替代方案。有许多<select> 替换脚本可用。

【讨论】：

不是真的 100% 恐怕...现代浏览器确实允许这样做。在 FireFox 中尝试；）但是它不是跨浏览器可靠的。
谢谢@Diodeus，你能帮我用 Javascript 来设置如下样式吗？ selected { /* 文本颜色和字体粗细，红色和粗体 */ color:blue;字体粗细：粗体； }
JavaScript 无法对标准选择项执行此操作。见：jankoatwarpspeed.com/post/2009/07/28/…
哦，我需要这样一个jsfiddle.net/TxbVt/1它也不能像你提到的那样工作@Diodeus