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

我用过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; } 

编辑：

事实certificate，select2将创建的建议框附加到文档正文，而不是它自己的select元素。 一个选项可以是将选择放在父容器中，并使用dropdownParent选项中的pass到构造函数：

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

所以你最终得到这样的东西：

标记：

    One   Two   Three   Four   Five       Vowel a   Vowel e   Vowel i   Vowel o   Vowel u    

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）更改，请确保您没有在您的元素中包含您的css代码包装你的select2。 原因如第一个答案所述：

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