如何覆盖.select2结果.select2突出显示的颜色 [英] How to override .select2-results .select2-highlighted color

问题描述

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

I have used select2 plugin. I have two select input box. I need to both are different highlighted color. Can anyone tell me the solution how to override the highlighted color?

推荐答案

如果您有两个不同的选择对象，则非常简单:

If you have two different select objects, is quite simple:

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

然后在您的CSS中执行:

then in your css do:

.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选项中使用传递给构造函数的方法:

It turns out select2 appends the created suggestion box to the document body, and not the select element it self. One option can be to place the selects inside a parent container and use pass in the dropdownParent option to the constructor:

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

因此，您最终得到的是这样的东西:

So you end up with something like this:

标记:

<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

这篇关于如何覆盖.select2结果.select2突出显示的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！