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

Question

你好，我想弄清楚如何更改 selection 的颜色（仅当 select 由用户编辑时，占位符必须为默认颜色 - 白色）与 select2 4.0.1

这是默认情况下的样子，第 3 张图片（前两张是 selected）

在 selection 之后应该是这样的：

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

原始 CSS 用于 select2

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

有人吗？谢谢回复

Answer 1

看来您只需要在背景图片中添加 !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 属性将保留在您选择的最后一个选项中，这意味着该字段将保留背景颜色。

How to change color of selection in Select2 4.0.1?