如何在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;}

人？谢谢你的回复

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

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

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

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