CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Muthudurai K
Muthudurai K

Reputation: 31

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?

Upvotes: 1

Views: 6079

Answers (2)

Timmy Von Heiss
Timmy Von Heiss

Reputation: 2218

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.

Upvotes: 0

Andres Zapata
Andres Zapata

Reputation: 1930

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

Upvotes: 1

Related Questions