Select2 options background color same as html select

Question

I am using select2 to populate an HTML select, I want select2 options to have same background color as html select control options, is there any option in select2JS that allow us to do it or I have to do it manually?

Here is the sample code

$('.selectcls').select2({
  minimumResultsForSearch: -1,
  placeholder: "Nothing selected",
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>

<div>
  <select id="select1" class="selectcls" style="width:100px" name="select1this" class="wrap">
        <option></option>
        <option style="background-color:green" value="A21">A21</option>
        <option style="background-color:blue" selected value="A22">A22</option>
        <option style="background-color:orange" value="A23">A23</option>
      </select>

</div>

or

jsfiddle

score 2 · Answer 1 · answered Aug 23 '17 at 09:14

You can specify whatever styles you want in your select2.css for Eg. I've overridden highlighted color from blue to yellowgreen

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: yellowgreen;
    color: white;
}

score 1 · Answer 2 · answered Aug 23 '17 at 09:12

1

You can use in this way,

.select2-results ul li {
    background-color: red;
}

If you want to try different color in different options. Then use CSS3 child property like li:nth-child(<child number>).

answered Aug 23 '17 at 09:12

Mohammad Ashraful Islam

1,679
14
27

1

Nice **CSS** solution bro and also if he wants to style `odd` or `even` options, then he can also use `:nth-child(odd)` or `:nth-child(even)` also. :) – Jithin Raj P R Aug 23 '17 at 09:23
cant change it using css as html is generated dynamically, I never know how many select items will be there and with which colors in their options. – Addy Aug 23 '17 at 11:26
From your example, you should know. But If you really don't then how are you gonna select color for an individual? – Mohammad Ashraful Islam Aug 23 '17 at 15:24
Done by using "select2:open" event, assigned
, ..!

Addy

Aug 24 '17 at 04:07

score 1 · Answer 3 · answered Oct 30 '18 at 08:05

I answer in detail here https://stackoverflow.com/a/53059749/7582170

For combo box

.select2-container--default .select2-selection--single{
    background-color: #000;
}

For options search box

.select2-search--dropdown{
    background-color: #000;
}
.select2-search__field{
    background-color: #000;
}

and for options list

.select2-results { 
    background-color: #000;
}

score 0 · Answer 4 · answered Jul 30 '21 at 11:15

With dynamic data you can take below approach.

let _colors = [
{
    "id": "#1CAC78",
    "text": "Green"
},
{
    "id": "#1F75FE",
    "text": "Blue"
},
{
    "id": "#FF7538",
    "text": "Orange"
}

And dropdown should be initialized with below code.

$("select").select2({
    templateResult: function (data, container) {
        if (data.element) {
            $(container).css({"background-color":data.id});
        }
        return data.text;
    },data:_colors
});

here is a fiddle for select2 option with background

Select2 options background color same as html select

4 Answers4