select2 change background color

Question

I am trying to use select2 on a webpage I am creating. However the combobox background seems to be transparent but I need to change it to another color. I tried modifying the select2.css file but nothing seems to work. Any Ideas ?

Solution 1

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!

Solution 2

It's a little late to help the OP, but I'll leave this answer in the hope it might help somebody.

I don't know about other versions, but using select2-rails 3.5.9.3 (which according to their github page means the version of select2 being used is 3.5) I was only able to change the background color as follows:

.select2-choice { background-color: #00f !important; }

The selector mentioned by Matthew for the results works, though.

Anyway, I didn't try it using "vanilla select2," so I don't know if there is any difference in this case.

Solution 3

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;
}

Comments

[Pathros]

I just found the .select2-results {} in the CSS, but i couldn't find the other two. Any ideas to modify those ones as well?