Select2 Change Background Color

select2 change background color

If you are trying to target the combo box wrapper use

.select2-search { background-color: #00f; }

If you are trying to target the input use

.select2-search input { background-color: #00f; }

And if you are trying to target the results wrapper use

.select2-results { background-color: #00f; }

Hope this helps!

How to change the background of each select2 option?

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.

Select2 Library: change the background color of the selected item

Finally I find the solution... need to override the following class:

/* Selected option */
.select2-results__option[aria-selected=true] {  }

for example:

.select2-results__option[aria-selected=true] {
    color: #ffffff;
    background-color: #9f998d;
}

Im sure I try before, but maybe I make a mistake.

Hope this answer can help others... thanks StackOverflow!!!

Changing background colour of specific select2 through javascript

Solved and solution provided here :

What I need was the "!important" in css class and finding the span I need to add the css class to.

CSS

    .yellowBackground{
        background: yellow !important;
    }

javascript

function pageLoad(){
  configureSelect2()
}

function configureSelect2(){

        td_Name = document.getElementById("<%=td_Name.ClientID %>");
        if (hf_Value.value == "1") {
            ($(td_Name).find('span')).addClass('yellowBackground');
        }
        else {
            ($(td_Name).find('span')).removeClass('yellowBackground');
        }
}

Hope this helps!

Select2 Input Box Results not changing Background Color

I figured out the answer! Here is my CSS Code that allowed me to change the styling of it. I KNEW i could do this with ONLY CSS and that there was no need for any type of javascript needed.

/* Results "Dropdown/DropUp" */
.select2-container--default .select2-results>.select2-results__options {
    background-color: #555555;
    color: #eeeeee;
}

/* Clear "X" */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #cccccc;
}

/* Clear "X" Hover */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #aa0000;
}
/* Each Result */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #555555;
}

I also tried to update the JS Fiddle, but it didn't work... So here's a screenshot instead. :P

https://imgur.com/a/LVYszsf

---

Related Topics