如何更改每个select2选项的背景？

Question

I'm using select2 for a dropdown selection box and I'm trying to change the background color of the options. There would be a separate color for each option. I've tried by adding a style attribute to the options but it doesn't seem to work.

<select class="js-example-basic-multiple form-control" id="select-tags" name="usertags" multiple="multiple">
        {% for tag in userTags %}
        <option value="{{ tag }}" data-id="{{ tag.color }}" style="background-color:{{ tag.color }}" class="options">{{ tag }}</option>
        {% endfor %}
    </select>

$('.js-example-basic-multiple').select2();

Answer 1

Adding background colors to the <option> elements inside your <select> isn't working because those elements end up hidden. Select2 hides the original <select> , then generates its own elements to produce a styled "fake" select control which mirrors the value of the hidden "real" one.

Since select2 doesn't provide an API for passing color values to individual options, you'll need to try either using nth-child() selectors in CSS or some extra javascript to style the fake option elements that select2 creates. Here's a question from 2018 with answers demonstrating each approach.