Select2 选项背景颜色与 html 选择相同

Posted 2023-05-07

【中文标题】Select2 选项背景颜色与 html 选择相同

【英文标题】：Select2 options background color same as html select

【发布时间】：2018-01-31 18:38:38

【问题描述】：

我正在使用 select2 来填充 html 选择， 我希望 select2 选项具有与 html 选择控件选项相同的背景颜色，select2JS 中是否有任何选项允许我们这样做或者我必须手动进行？

这里是示例代码

$('.selectcls').select2(
  minimumResultsForSearch: -1,
  placeholder: "Nothing selected",
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>

<div>
  <select id="select1" class="selectcls" style="width:100px" name="select1this" class="wrap">
        <option></option>
        <option style="background-color:green" value="A21">A21</option>
        <option style="background-color:blue" selected value="A22">A22</option>
        <option style="background-color:orange" value="A23">A23</option>
      </select>

</div>

或

jsfiddle

【参考方案1】：

您可以在您的 select2.css 中指定您想要的任何样式 例如。我已将突出显示的颜色从蓝色覆盖为黄绿色

.select2-container--default .select2-results__option--highlighted[aria-selected] 
    background-color: yellowgreen;
    color: white;

【参考方案2】：

你可以这样使用，

.select2-results ul li 
    background-color: red;

如果您想在不同的选项中尝试不同的颜色。然后使用 CSS3 子属性，如 li:nth-child(<child number>)。

【讨论】：

不错的 CSS 解决方案兄弟，如果他想设置odd 或even 选项的样式，那么他也可以使用:nth-child(odd) 或:nth-child(even)。 :)

无法使用 css 更改它，因为 html 是动态生成的，我不知道会有多少选择项以及它们的选项中有哪些颜色。

从您的示例中，您应该知道。但是，如果您真的不这样做，那么您将如何为个人选择颜色？

使用“select2:open”事件完成，将 bg分配给，..！

【参考方案3】：

我这里详细回答https://***.com/a/53059749/7582170

对于组合框

.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】：

使用动态数据，您可以采取以下方法。

let _colors = [

    "id": "#1CAC78",
    "text": "Green"
,

    "id": "#1F75FE",
    "text": "Blue"
,

    "id": "#FF7538",
    "text": "Orange"

并且下拉菜单应该用下面的代码初始化。

$("select").select2(
    templateResult: function (data, container) 
        if (data.element) 
            $(container).css("background-color":data.id);
        
        return data.text;
    ,data:_colors
);

这是select2 option with background的小提琴