Jquery 如何在Select2 4.0.1中更改所选内容的颜色？

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

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

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

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

select2的原始CSS

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

有人吗？谢谢你的回复

---

看起来您只需添加一个！对于背景图像属性很重要，或者确保在包含select2 CSS后，页面中包含自定义CSS

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

更新

好的，看起来您的JSFIDLE在编辑select2时使用的是以前的版本。现在我明白你的问题了

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

.select2-selection {
    overflow: hidden;
}

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

这将针对在您进行选择时更新的元素-将

title

属性添加到

中。从下拉列表中选择选项时，选择2-selection\uu rendered

元素，因此当存在

title

属性时，上述CSS将更改背景颜色

overflow:hidden

属性在其中，因为当您更改该元素的背景颜色时，它会溢出父元素

---

此设置中的缺陷是，如果清除选择，则

title

属性与您选择的最后一个选项保持在一起，这意味着该字段将保留背景颜色。

添加了工作jsfiddle抱歉有点粗鲁（因不知道如何修复if而沮丧），您的解决方案运行良好，即[title]我想不起来了，不知道有关于标题的解决方法，但我知道我必须将标题包括在CSS中：）谢谢，没问题，我知道这种感觉！很遗憾，清除选择时标题属性仍保留在那里，否则这将非常有效。您必须使用JS来解决这个问题。对于最新版本4.0.4，这仍然是一个很好的解决方案：