Question

我使用过select2插件。我有两个选择输入框。我需要两种不同的突出显示颜色。任何人都可以告诉我如何覆盖突出显示的颜色的解决方案吗？

Answer 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将创建的建议框附加到文档正文，而不是它自己的select元素。一个选项可以是将选择放在父容器中，并使用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

Answer 2

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

事实证明，select2将创建的建议框附加到文档正文，而不是选择元素本身。

如何覆盖.select2-results .select2-突出显示的颜色

2 个答案: