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

没有类可以更改下拉列表的初始状态，但您可以编写自己的简短易懂的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 2

答案可能是:

如果你知道插件，我有这些问题的选择框，在10分钟后，我告诉自己=“的，这不是我的问题”。

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

解决方案是销毁创建的元素并再次重新创建它。如果它不起作用，告诉我，删除答案，即使我90%确信这是问题所在。

Answer 3

select2更改下拉列表的颜色

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

你看