jquery - 如何在Select2 4.0.1中更改选择的颜色？

您好，我正在尝试找出如何使用select2 4.0.1更改选择的颜色（仅当用户选择时，占位符必须为默认颜色-白色）。

这是默认情况下第3张图片的外观（选择了前两个）


选择后应该看起来像：


我知道如何为select2 3.5.x设置CSS，但最近我们决定更新我们的select 2，我正在努力...

select2的原始CSS

.select2-container .select2-choice:not(.select2-default) {
background-image: none;
background-color: #D9FFC7;}

任何人？谢谢您的回复

working jsfiddle

最佳答案

看起来您只需要在background-image属性中添加！important即可，或者确保在包含select2 CSS之后，将自定义CSS包含在页面中。

.select2-container .select2-choice:not(.select2-default) {
    background-image: none !important;
    background-color: #D9FFC7;
}

更新

好的，看起来您的JSFiddle在我编辑它时正在使用早期版本的select2。现在，我看到了您的问题。

为了坚持使用纯CSS解决方案，我提出了以下建议：

.select2-selection {
    overflow: hidden;
}

.select2-selection__rendered[title] {
    background-color: #D9FFC7;
}

这将以您进行选择时更新的元素为目标-当您从下拉列表中选择一个选项时，title属性会添加到.select2-selection__rendered元素中，因此当存在属性存在。

之所以使用title属性，是因为当您更改该元素的背景颜色时，它会从父元素中溢出。

此设置的缺陷在于，如果清除选择，则overflow: hidden属性将与您选择的最后一个选项一起保留在该位置，这意味着该字段的背景为彩色。