select2 改变背景颜色答案

【问题标题】：select2 change background colorselect2 改变背景颜色
【发布时间】：2013-07-20 06:11:50
【问题描述】：

我正在尝试在我正在创建的网页上使用 select2。但是组合框背景似乎是透明的，但我需要将其更改为另一种颜色。我尝试修改 select2.css 文件，但似乎没有任何效果。有什么想法吗？

【问题讨论】：

标签： javascript jquery css jquery-select2

【解决方案1】：

如果您尝试定位组合框包装器，请使用

.select2-search { background-color: #00f; }

如果您尝试针对输入使用

.select2-search input { background-color: #00f; }

如果您试图定位结果包装器，请使用

.select2-results { background-color: #00f; }

希望这会有所帮助！

【讨论】：

我刚刚在 CSS 中找到了.select2-results {}，但我找不到其他两个。有什么想法可以修改这些吗？

【解决方案2】：

帮助 OP 有点晚了，但我会留下这个答案，希望它可能对某人有所帮助。

我不知道其他版本，但使用 select2-rails 3.5.9.3 （根据他们的github page 意味着正在使用的 select2 版本是 3.5）我只能更改背景颜色如下：

.select2-choice { background-color: #00f !important; }

不过，Matthew 提到的用于结果的选择器有效。

反正我没有用“vanilla select2”试过，所以不知道这种情况有什么不同。

【讨论】：

【解决方案3】：

对于组合框

.select2-container--default .select2-selection--single{
    background-color: #000;
}

用于选项搜索框

.select2-search--dropdown{
    background-color: #000;
}
.select2-search__field{
    background-color: #000;
}

对于选项列表

.select2-results { 
    background-color: #000;
}

【讨论】：

【解决方案4】：

使用 disabled Select2 4.1.0 为我测试和工作：

 .select2-container .select2-selection--single .select2-selection__rendered{
            background-color: #fff;
        }
        
       .select2-container--default.select2-container--disabled .select2-selection--single{
            background-color: #fff;
        }

        .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single{
            border: none;
        }

【讨论】：