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.

Solution 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)

Solution 2

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

try this css its will work fine