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分钟后我告诉我的自我=“darn，这不是我的问题”。

这些插件中的问题是它们从你的select标签中获取选项，只是创建了一个自己的对象。

解决方案是销毁创建的元素并重新创建它。如果它不起作用，告诉我，即使我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);  
}

select2更改下拉列表的颜色

4 个答案: