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

Question

您好我想弄清楚如何更改选择的颜色（仅当用户选择，占位符必须是默认颜色 - 白色）和select2 4.0.1

这是它在默认情况下的样子，第3张照片（前两张被选中）

选择后应该看起来像：

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

select2的原始CSS

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

任何人？ 谢谢您的回复

工作jsfiddle

Answer 1

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

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

UPDATE

好吧，看起来你的JSFiddle在我编辑时使用的是以前版本的select2。 现在我看到了你的问题。

试着坚持使用纯CSS解决方案，我想出了这个：

.select2-selection {
    overflow: hidden;
}

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

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

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

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