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

Question

您好，我正在尝试弄清楚如何使用 select2 4.0.1 更改选择的颜色(仅当用户选择时，占位符必须为默认颜色 - 白色)

这就是默认情况下的样子，第三张图片(前两张已选择)

选择后，它应该看起来像:

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

select2 的原始 CSS

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

有人吗？谢谢回复

working jsfiddle

Answer 1

看起来您只需向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;
}

这将针对您进行选择时更新的元素 - a title属性被添加到 .select2-selection__rendered当您从下拉列表中选择一个选项时，上面的CSS将更改背景颜色，当有title时存在属性。

overflow: hidden属性在那里，因为当您更改该元素的背景颜色时，它会溢出父元素。

此设置的缺陷是，如果清除选择，title属性与您选择的最后一个选项一起保留在那里，这意味着该字段保留背景色。