时间戳

首页 > 解决方案 > Select2 输入框结果不改变背景颜色

javascript - Select2 输入框结果不改变背景颜色

问题描述

我正在使用 Select2 Input CSS/jQuery 框架 ( https://select2.org/ ) 来帮助我处理多选框。单击时，我无法更改选择框结果的背景。

我提供了一个 JS fiddle 让你们更好地理解。

https://jsfiddle.net/L26bzgmf/

这是我正在处理的选择框：

<select class="form-control select2-multi" name="tags" multiple="multiple">
    <option value="1">Tag 1</option>
    <option value="2">Tag 2</option>
    <option value="3">Tag 3</option>
    <option value="4">Tag 4</option>
</select>

单击该框时，我需要四个标签以白色文本显示，背景为#333333。然后，当您通过自动选择的标签 1 看到结果被选中时，我需要将背景颜色从浅灰色更改为 #666666，字体为白色，“删除”x 为白色，当悬停时需要转向#aa0000。

我尝试过使用 jQuery，我尝试过使用 CSS……我似乎无法让它们改变。完全没有。它很烦人。他们的文档曾经非常好，但现在只是……我想不通。为此，我还准备了类似于 Select2 的替代选项。

我正在为我的博客创建一个“标签”系统。

标签： javascriptjqueryhtmlcss

解决方案

我想出了答案！这是我的 CSS 代码，它允许我更改它的样式。我知道我可以只用 CSS 来做到这一点，并且不需要任何类型的 javascript。

/* Results "Dropdown/DropUp" */
.select2-container--default .select2-results>.select2-results__options {
    background-color: #555555;
    color: #eeeeee;
}

/* Clear "X" */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #cccccc;
}

/* Clear "X" Hover */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #aa0000;
}
/* Each Result */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #555555;
}

我也尝试更新 JS Fiddle，但它没有用......所以这里是一个截图。:P

https://imgur.com/a/LVYszsf

推荐阅读