Is it possible to customize the background color of select2 boxes separately for each option?

Question

Is it possible to customize the background color of select2 boxes separately for each option?

I recently implemented the select2 plugin and now I'm looking to add a new class within the .select2-results .select2-highlighted class in order to change the background color. Does anyone have any suggestions on how to achieve this?

javascript jquery html css

Answer 1

Answer №1

If you want to style different select2 boxes with different colors, it can be a bit tricky due to how select2 generates HTML and adds it to the document:

According to the documentation:

By default, Select2 attaches the dropdown to the end of the body and positions it below the selection container using absolute positioning.

Even though the dropdown is attached to the body by default, Select2 can display above the container if there isn't enough space below but ample space above it. It's not restricted to displaying within the parent container, making it suitable for rendering inside modals and other small containers.

While this makes select2 more compatible with modals, it also means styling descendants of the original select's parent won't work as expected.

However, you can use the dropdownParent option to specify where the generated HTML should be added.

The solution involves adding a data-select2-container="" attribute to each select element that should have a different colored select2 counterpart. This code snippet will then create a div with the specified class in the attribute, insert it after the original select element, and append the select2 box as its child. This allows you to style elements as children of a div with the designated 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>

Key points to note:

This code is designed for the full version of select2 4.0.0 (and its corresponding CSS )
Elements added using this method may not behave as expected if placed within a modal (as per the comments in the documentation, albeit untested)
In such scenarios, modifying the plugin directly might be a viable option to include this functionality natively, given the absence of an existing option for it in the original plugin code.

Answer 2

If you want to style different select2 boxes with different colors, it can be a bit tricky due to how select2 generates HTML and adds it to the document:

According to the documentation:

By default, Select2 attaches the dropdown to the end of the body and positions it below the selection container using absolute positioning.

Even though the dropdown is attached to the body by default, Select2 can display above the container if there isn't enough space below but ample space above it. It's not restricted to displaying within the parent container, making it suitable for rendering inside modals and other small containers.

While this makes select2 more compatible with modals, it also means styling descendants of the original select's parent won't work as expected.

However, you can use the dropdownParent option to specify where the generated HTML should be added.

The solution involves adding a data-select2-container="" attribute to each select element that should have a different colored select2 counterpart. This code snippet will then create a div with the specified class in the attribute, insert it after the original select element, and append the select2 box as its child. This allows you to style elements as children of a div with the designated 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>

Key points to note:

This code is designed for the full version of select2 4.0.0 (and its corresponding CSS )
Elements added using this method may not behave as expected if placed within a modal (as per the comments in the documentation, albeit untested)
In such scenarios, modifying the plugin directly might be a viable option to include this functionality natively, given the absence of an existing option for it in the original plugin code.

Is it possible to customize the background color of select2 boxes separately for each option?

Answer №1

Key points to note:

Similar questions

Generating small image previews in JavaScript without distorting proportions

Reactjs may have an undefined value for Object

Using string literals in Vue and HTML classes

"Discovering the data-id of an active class is essential - here

Trouble with importing scss file in sass and bootstrap collaboration

Navigating the absence of Prismic's ability to use the <blockquote> element in their rich text editor

Tips for selecting the correct date on a DatePicker using selenium?

Error: The studentsList is not iterable. Issue encountered during Jasmine Unit Testing in Angular 2

Transforming a string into an array containing objects

conceal a targeted section from the bottom of the iframe

Although the ng-click HTML code functions as expected, the same code within an AngularJS function does not seem to work properly

Modify the appearance of HTML dialog box using CSS styling

When using the navbar in Tailwind CSS, the image is appearing distorted instead of aligning properly with the adjacent

Unusual issue with jQuery's AJAX functionality

Retrieve the div element by calling a scriptlet with JavaScript

The HTML unit is unable to locate the form for unknown reasons. My suspicion is that it could be due to the presence of Angular

Angular (TypeScript) time format in the AM and PM style

How can I select a checkbox using jQuery?

Eliminate borders for text input in Bootstrap 3 styling

transferring data from grails to javascript via a map