How to change font color of select2 control using css

Question

I am using the following HTML code to include a select2 control in my form as below.

<select id="element_id" class="select2" style="width:100%">
<option value="e1" >Element 1</option>
<option value="e2" >Element 2</option>
<option value="e3" >Element 3</option>
</select>

I am using the following style to format the font of the list items and selected item.

<style>
    #s2id_element_id .select2-container--default .select2-selection--single .select2-selection__rendered 
    {
        color: green ;
    }
</style>

This does not color the list items and selected item in green color. Note: I only need this specific select box to have the style but not others. So I am using the css id selector for specific select2 control.

Thanks.

Caesarea

This is not typographical error, I tried both element_id and s2id_element_id as well. – Caesarea

Answer 1

Here's a list of classes you need to use for styling select2 input:

/* Input field */
.select2-selection__rendered {  }
    
/* Around the search field */
.select2-search {  }
    
/* Search field */
.select2-search input {  }
    
/* Each result */
.select2-results {  }
    
/* Higlighted (hover) result */
.select2-results__option--highlighted {  }
    
/* Selected option */
.select2-results__option[aria-selected=true] {  }

If you want you can play around in this JSBin I've created, so you can test things out.

I've updated my JSBin, in it you can see how you can style a specific select2 list (instead of globally adding styles)

Fidelia

I hope this is the answer you were looking for (and maybe a bit more). If not I would be happy to provide additional information. – Fidelia

Hi Mihailo, Thanks for the effort. What I want is to include an additional selector using the element_id in selectors. I only need to color a specific select2 control but not all the select2 controls in my form. Only this specific control need to be colored. So I tried the id selector as the first in the list but did not work. I tried both #s2id_element_id as well as just #element_id but did not work. – Caesarea

for example I am expecting something like below to exactly filter my specific select 2 control, #element_id .select2-selection__rendered { background-color: yellow; } – Caesarea

Ahhh, sorry for not interpreting your question correctly. I've updated the JSBin with code for styling a specific select2 using the given ID. Hope you can find it useful. – Fidelia

@WajiraWeerasinghe Hahaha you're a legend I wore this two weeks ago xD Glad I could help you out. :] – Fidelia

big Thanks. @Mihailo, you saved me. – Hannahhannan

Answer 2

.select2-results .select2-highlighted {
    background: #3ea211;
}

try this css its will work fine

Corium

Answer 3

.select2-container--default .select2-results__option--highlighted[aria-selected] {
   background-color: #5897fb !important;
   color: white;
}

try this

Lammastide

Answer 4

<select id="listcolors" name="color[]" class="js-example-placeholder-multiple js-states form-control"
                multiple="multiple">

    @foreach ($colors as $item)
        <option value="{{ $item->id }}" title="{{ $item->color_code }}">{{ $item->color_name }}
        </option>
    @endforeach

</select>

<script>
                
    function formatState(state) {
        if (!state.id) {
            return state.text;
        }
        var $state = $(
            '<span><img width="10" height="10" style="background-color:' + state.element.title + ';"  /> ' + state
                        .text + '</span>'

        );
        return $state;
    };

    $("#listcolors").select2({
        templateResult: formatState,
        placeholder: "Choisir une couleur"
    });
</script>

Svoboda

Answer 5

$("#select2-**element_id**-container").css('color','green');

Exhibit