如何覆盖 .select2-results .select2-highlighted 颜色答案

【问题标题】：How to override .select2-results .select2-highlighted color如何覆盖 .select2-results .select2-highlighted 颜色
【发布时间】：2015-09-29 03:49:51
【问题描述】：

我使用了 select2 插件。我有两个选择输入框。我需要两者都是不同的突出显示颜色。谁能告诉我解决方案如何覆盖突出显示的颜色？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

如果你有两个不同的选择对象，那就很简单了：

$(document).ready(function() {
 $(".select-1").select2();
 $(".select-2").select2();
});

然后在你的css中做：

.select-1 select2-results__option select2-results__option--highlighted {
    background: #5897fb;
 }

.select-2 select2-results__option select2-results__option--highlighted {
    background: #6d6d6d;
}

编辑：

原来 select2 将创建的建议框附加到文档正文，而不是它自己的选择元素。一种选择是将选择项放置在父容器中，然后将 dropdownParent 选项传递给构造函数：

 $("#menuOption1").select2({dropdownParent: "#menuOption1-container"});

所以你最终会得到这样的结果：

标记：

<span id="menuOption1-container">
    <select id="menuOption1"> 
        <option value="1"> One </option>
        <option value="2"> Two </option>
        <option value="3"> Three </option>
        <option value="4"> Four </option>
        <option value="5"> Five </option>
    </select>
</span>

<span id="menuOption2-container">
    <select id="menuOption2"> 
        <option value="a"> Vowel a </option>
        <option value="e"> Vowel e </option>
        <option value="i"> Vowel i </option>
        <option value="o"> Vowel o </option>
        <option value="o"> Vowel u </option>
    </select>
</span>

jQuery：

$(document).ready(function() {
    $("#menuOption1").select2({dropdownParent: "#menuOption1-container"});
    $("#menuOption2").select2({dropdownParent: "#menuOption2-container"});
});

最后是 Css：

#menuOption1-container  .select2-results__option--highlighted {
    background-color: #50831F !important;
}

#menuOption2-container  .select2-results__option--highlighted {
   background-color: #28915F !important;
}

这是一个活生生的例子：

jsfiddle

【讨论】：

我使用了两个不同的 id #menuOption1 和 #menuOption2。和 css .select2-results .select2-highlighted{ background-color: #28915F;它应该适用于两个 id。我需要两个不同的。
那么应该是：#menuOption1 select2-results__option select2-results__option-- 高亮{背景：#5897fb; } #menuOption2 select2-results__option select2-results__option-- 突出显示 { 背景：#6d6d6d; }

【解决方案2】：

如果有人发现这个问题并且无法让select2-results__option select2-results__option--highlighted { background-color } 从默认的蓝色 (#5897fb) 更改，请确保您没有将您的 css 代码包含在包装您的 select2 的元素中。原因如第一个答案所述：

原来 select2 将创建的建议框附加到文档正文，而不是 select 元素本身。

【讨论】：