select2 change color of dropdown

Question

Yeah, so I have no idea what I'm doing. Hah.

I want to change the color of select2's un-opened dropdown (and maybe the button on the side), but hunting for a solution has only managed to snag me

.select2-choice{
  min-height: 35px;
  max-height: 35px;
  background: #222;
  overflow-y: auto;
}

.select2-search {
    background-color: #666;
}

.select2-search input {
    background-color: #666;
}
.select2-results {
    background-color: #666;
}

Which gets the options changed (Which is good!) but isn't 100% what I'm after.

Is there a class that changes the color of the dropdown's initial state?

look here: http://stackoverflow.com/questions/12836227/change-select-box-option-background-color — brunozrk, Feb 14 '14 at 17:41

Andrey Kudriavtsev · Answer 1 · 2016-09-23T11:35:13.360

1

select2 change color of dropdown

.select2-results__option {
    background-color: red;
    color: yellow;
}

look

edited Sep 23 '16 at 11:35

answered Sep 23 '16 at 11:24

Andrey Kudriavtsev

1,124
11
19

Nice! How did you find that out? I couln't find that out with the inspector tool.. – Adam Jan 31 '18 at 08:49
look better ;)) – Andrey Kudriavtsev Feb 07 '18 at 06:20

score 0 · Answer 2 · answered Feb 14 '14 at 20:31

it might be the answer:

i had those problems with SelectBox if you know the plugin, after like 10 mins i told to my self = "darn, it isn't my problem".

problem in those plugin its that they are taking the options from your select tag and just creates an object of thier own.

the solution is to destroy the created element and re-create it again. if its not working, tell me, ill delete the answer even though im 90% convinced its the problem.

score 0 · Answer 3 · answered Feb 25 '14 at 16:36

There is no class to change a dropdown's initial state, but you can write your own very short and easy to understand Jquery to set a dropdown's color.

First, write the color changing function:

var changeColor = function (element, selection) {//changes colors of dropdowns
    if (selection == 1 || selection == "green") {//Mine works based on the dropdown itself
        element.css('background-color', 'green');
    }
    else if (selection == 2 || selection == "yellow") {
        element.css('background-color', 'yellow');
    }
    else {
        element.css('background-color', 'red');
    }
}

Then, make sure that you run the function when your page is finished rendering:

jQuery(document).ready(function ($) {
    changeColor($('#ColoredDropdown'), $('#ColoredDropdown').val());
});

Finally, be sure to call the color changing function whenever you need it - in this case, when you change another dropdown:

$('#FirstDropdown').change(function () {
    changeColor($('#SecondDropdown'), $('#FirstDropdown').val());
});

Sorry this answer is so late! I don't totally understand your question so you'll have to get the "gist" of what I'm saying rather than just copying and pasting, but I hope it helps.

score 0 · Answer 4 · answered Jul 30 '21 at 22:09

I realize this is an old question now but it has been viewed quite a few times over the years and has no accepted answer yet. I just recently worked on a theming project where I had to theme these controls so I wanted to share how I solved this problem.

The following CSS overrides different pieces of the Select 2 drop-down control. If you would like to see it in action and/or change the somewhat garish example colors to something matching your own project, you can try it out in out in this fiddle: https://jsfiddle.net/0t4ky6e5/2

:root {
    --Color1: #3333FF;
    --Color2: #FFFFFF;
    --Color3: #EC2121;
    --Color4: #000000;
    --Color5: #AAAAAA;
    --Color6: #F99320;
}

.js-example-basic-single {
  width: 200px;
}

/* Search Box */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--Color4);
  color: var(--Color2) !important;  
}

/* Search Box border */
.select2-search--dropdown{
  background: var(--Color6);
}

/* Selected / Initial state input */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  background: var(--Color1);
  color: var(--Color2) !important;  
}

/* Option List Area */
.select2-results__option {
  background: var(--Color1);
  color: var(--Color2) !important;   
}

/* Arrow button */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  background: var(--Color3);
}

/* Selectable items highlight */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--Color3) !important;  
}

/* Selected item highlight */
.select2-container--default .select2-results__option--selected {
  background: var(--Color5) !important; 
  color: var(--color4) !important;
}

/* Search result message area */
.select2-results__message {
  background: var(--Color6);  
}

select2 change color of dropdown

4 Answers4