How to override .select2-results .select2-highlighted color

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?

Answers:

Answer

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

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

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;
}

Edit:

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:

Markup:

<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"});
});

and finally the Css:

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

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

Here's a live example:

jsfiddle

Answer

If anyone finds this question and is having trouble getting select2-results__option select2-results__option--highlighted { background-color } to change from the default blue (#5897fb), make sure that you are not including your css code inside of the element that wraps your select2. The reason is as stated in the first answer:

It turns out select2 appends the created suggestion box to the document body, not the select element itself.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.