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 ?

Eggshaped

Answer 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!

Abdominous

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? – Freehearted

Answer 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.

Bernard

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

Sluice

Answer 4

A few more snippets below where I overrided the CSS in order to change the appearence of the Select2 dropdown select to suit my custom dark theme. (I'm using Bootstrap 5)

https://apalfrey.github.io/select2-bootstrap-5-theme/getting-started/basic-usage/

I accessed the non minified css file through the CDN to find what bits i needed to override and through trial and error, i came up with the below:

/* ------------------------------------- */
/* ---------- Select2 Library ---------- */
/* ------------------------------------- */

/* See https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.2.0/select2-bootstrap-5-theme.css */

/* Change the appearence of the bakground colour surrounding the search input field */
.select2-search {
    background-color: #343A40 !important;
}
    /* Change the appearence of the search input field */
    .select2-search input {
        color: #ffffff !important;
        background-color: #343A40 !important;
    }

/* Change the appearence of the search results container */
.select2-results {
    background-color: #343A40 !important;
}

/* Change the appearence of the dropdown select container */
.select2-container--bootstrap-5 .select2-selection {
    border-color: #6c757d !important;
    color: #ffffff !important;
    background-color: #343A40 !important;
}

/* Change the caret down arrow symbol to white */
.select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Change the color of the default selected item i.e. the first option */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
}

Galatea

Answer 5

.select2-selection
{
   background-color: #f5f5f5 !important;
}

Esterify

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Unfolded

Answer 6

Select2 dark them for Bootstrap 5

/* Select 2 Dark Theme */
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: #212529 !important;
}

    html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #fff !important;
    }

html[data-bs-theme="dark"] .select2-dropdown {
    background-color: #212529 !important;
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: black !important;
}

Cordell

Answer 7

Tested and worked for me with disabled Select2 4.1.0 :

 .select2-container .select2-selection--single .select2-selection__rendered{
            background-color: #fff;
        }
        
       .select2-container--default.select2-container--disabled .select2-selection--single{
            background-color: #fff;
        }

        .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single{
            border: none;
        }

Epanodos

Answer 8

I'm using Bootstrap and I'm trying to set up Select2 for dark mode. But the solution gets you to what you are looking for.

.select2-container
  background-color: light-dark($white, $light-bg-subtle-dark) !important
  color: light-dark($light-bg-subtle-dark, $white) !important

  .select2-results__option,
  .select2-selection--single,
  .select2-dropdown
    background-color: light-dark($white, $light-bg-subtle-dark) !important
    color: light-dark($light-bg-subtle-dark, $white) !important

  .select2-selection__rendered
    color: light-dark($dark, $white) !important

Algol