Change option background color for individual select2 boxes?

Question

I have used select2 plugin. I need to add the new class in .select2-results .select2-highlighted class for override the background color. Can anyone please tell me the solution.

Answer 1

You want to color different select2 boxes different colors. select2 actually makes this a bit difficult because of the format of the generated html and the way it is added to your document:

From the Docs:

By default, Select2 will attach the dropdown to the end of the body and will absolutely position it to appear below the selection container.

When the dropdown is attached to the body, you are not limited to just displaying the dropdown below the container. Select2 will display above the container if there is not enough space below the container, but there is enough space above it. You are also not limited to displaying the dropdown within the parent container, which means Select2 will render correctly inside of modals and other small containers.

This apparently helps select2 work better in modals and such but it bones you because the "parent" element doesn't mean jack now,....ie - styling descendants of the original select's parent wont help you.

However, the dropdownParent option lets you specify where the generated html should be added...so we can work with that instead.

The basic idea is to add a data-select2-container="" attribute to each select whose select2 counterpart should be colored differently. The code will then create an div with the class specified in the attribute and add it after the original select then append the select2 box as a child of that added div thus allowing you to style the elements as children of a div with the specified class:

$(function () {
     $(".select2").each(function(i,e){
         $this = $(e);
         if($this.data('select2-container')){
         	 // if a container was specified as a data attribute, create that container and add it after the current raw select element
        	 // the value set for `data-select2-container` will be used as the class for the container
             $('<div class="'+$this.data('select2-container')+'"></div').insertAfter($this);
             $this.select2({
      		     placeholder: 'Select an option...',
     		     dropdownParent:$this.next() // set the parent for the generated html to the element we created
    		 });
         } 
         else $this.select2({ placeholder: 'Select an option...'}); // handel cases where a container was not specified 
     });
});

.orange .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: orange;
}

.red .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: red;
}

.green .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="container1">
    <select class="select2" data-select2-container="orange">
        <option></option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
    </select><br>
    <div class="container2">
        <select class="select2" data-select2-container="green">
            <option></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select><br>
        <select class="select2" data-select2-container="red">
            <option></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>
        
</div>
<br>

Important notes:

1. This code will only work if you are using the full version of select2 4.0.0 (and the CSS to go with it )
2. Elements added like this may not function as expected if they are in a modal (judging by the comments in the docs, not tested)
3. This is one of those cases where I might would just download the plugin and edit it so that it has this functionality natively, I cant image why the author didnt include an option for this...