How to change font color of select2 control using css

问题

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.

回答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)

回答2:

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

try this css its will work fine

回答3:

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

try this

来源：https://stackoverflow.com/questions/40748026/how-to-change-font-color-of-select2-control-using-css

标签

html

css

select2