22

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 ?

0

7 Answers 7

36

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!

1
  • 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?
    – Pathros
    Apr 27, 2015 at 20:56
5

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.

2

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

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

enter image description here

1
.select2-selection
{
   background-color: #f5f5f5 !important;
}
1
  • 2
    Your answer could be improved by adding more information on what the code does and how it helps the OP.
    – Tyler2P
    Sep 18, 2022 at 17:52
0

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

Result

0

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

Select2 Dark Theme For Bootstrap 5

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.