select2 更改下拉菜单的颜色

Question

是的，所以我不知道我在做什么。哈。

我想更改 select2 的未打开下拉菜单的颜色（可能还有侧面的按钮），但寻找解决方案只能设法阻止我

.select2-choice{
  min-height: 35px;
  max-height: 35px;
  background: #222;
  overflow-y: auto;
}

.select2-search {
    background-color: #666;
}

.select2-search input {
    background-color: #666;
}
.select2-results {
    background-color: #666;
}

这改变了选项（这很好！）但不是 100% 我所追求的。

是否有一个类可以改变下拉菜单初始状态的颜色？

Answer 1

select2 改变下拉菜单的颜色

.select2-results__option {
    background-color: red;
    color: yellow;
}

look

Answer 2

这可能是答案：

如果你知道插件，我在使用 SelectBox 时遇到了这些问题，大约 10 分钟后，我告诉自己 =“该死，这不是我的问题”。

这些插件中的问题是它们从您的选择标签中获取选项并创建自己的对象。

解决方案是销毁创建的元素并重新创建它。 如果它不起作用，请告诉我，即使我 90% 相信它的问题，我也会删除答案。

Answer 3

没有更改下拉菜单初始状态的类，但您可以编写自己的非常简短易懂的 Jquery 来设置下拉菜单的颜色。

首先，编写变色函数：

var changeColor = function (element, selection) {//changes colors of dropdowns
    if (selection == 1 || selection == "green") {//Mine works based on the dropdown itself
        element.css('background-color', 'green');
    }
    else if (selection == 2 || selection == "yellow") {
        element.css('background-color', 'yellow');
    }
    else {
        element.css('background-color', 'red');
    }
}

然后，确保在页面完成渲染后运行该函数：

jQuery(document).ready(function ($) {
    changeColor($('#ColoredDropdown'), $('#ColoredDropdown').val());
});

最后，请务必在需要时调用颜色更改函数 - 在这种情况下，当您更改另一个下拉菜单时：

$('#FirstDropdown').change(function () {
    changeColor($('#SecondDropdown'), $('#FirstDropdown').val());
});

对不起，这个答案来得太晚了！我不完全理解您的问题，因此您必须了解我所说的“要点”，而不仅仅是复制和粘贴，但我希望它会有所帮助。

Answer 4

我现在意识到这是一个老问题，但多年来它已经被查看了很多次，并且还没有被接受的答案。我最近刚刚参与了一个主题项目，我必须为这些控件设置主题，所以我想分享我是如何解决这个问题的。

以下 CSS 覆盖 Select 2 下拉控件的不同部分。如果您想看到它的实际效果和/或将有些花哨的示例颜色更改为与您自己的项目相匹配的颜色，您可以在这个小提琴中尝试一下：https://jsfiddle.net/0t4ky6e5/2

:root {
    --Color1: #3333FF;
    --Color2: #FFFFFF;
    --Color3: #EC2121;
    --Color4: #000000;
    --Color5: #AAAAAA;
    --Color6: #F99320;
}

.js-example-basic-single {
  width: 200px;
}

/* Search Box */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--Color4);
  color: var(--Color2) !important;  
}

/* Search Box border */
.select2-search--dropdown{
  background: var(--Color6);
}

/* Selected / Initial state input */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  background: var(--Color1);
  color: var(--Color2) !important;  
}

/* Option List Area */
.select2-results__option {
  background: var(--Color1);
  color: var(--Color2) !important;   
}

/* Arrow button */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  background: var(--Color3);
}

/* Selectable items highlight */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--Color3) !important;  
}

/* Selected item highlight */
.select2-container--default .select2-results__option--selected {
  background: var(--Color5) !important; 
  color: var(--color4) !important;
}

/* Search result message area */
.select2-results__message {
  background: var(--Color6);  
}