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.
/* 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)
.select2-results .select2-highlighted {
background: #3ea211;
}
try this css its will work fine
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With