select2 更改下拉菜单的颜色

Posted 2023-02-21

【中文标题】select2 更改下拉菜单的颜色

【英文标题】：select2 change color of dropdown

【发布时间】：2014-03-14 04:55:36

【问题描述】：

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

我想更改 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% 我所追求的。

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

【问题讨论】：

看这里：***.com/questions/12836227/…

【参考方案1】：

select2 改变下拉菜单的颜色

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

look

【讨论】：

不错！你是怎么发现的？我无法使用检查器工具找到它..

看起来更好;))

【参考方案2】：

这可能是答案：

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

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

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

【参考方案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());
);

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

【参考方案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);