Select2更改背景颜色

Question

我正在创建一个网页，想要使用select2插件。不过，下拉框的背景似乎是透明的，但我需要将其改成另一种颜色。我尝试修改select2.css文件，但好像没有效果。有什么建议吗？

- Patrick Jane

Answer 1

如果您想要针对组合框包装器进行定位，请使用下列代码：

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

如果您想要定位输入，请使用

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

如果您想要定位结果包装器，请使用以下方法：

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

希望这能帮到您！

- Matthew R.

---

我刚在CSS中找到了.select2-results {}，但是我找不到另外两个。有什么想法也修改它们吗？ - Pathros

Answer 2

很抱歉不能帮助原作者了，但我会留下这个答案，希望能对其他人有所帮助。我不知道其他版本的情况，但使用select2-rails 3.5.9.3（根据他们的github页面，表示正在使用select2的版本为3.5），我只能按以下方式更改背景颜色：

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

马修提到的选择器对结果有效。

无论如何，我没有尝试使用“纯净的select2”，因此我不知道在这种情况下是否有任何区别。

- Grandor

Answer 3

对于下拉框

.select2-container--default .select2-selection--single{
    background-color: #000;
}

选项搜索框

.select2-search--dropdown{
    background-color: #000;
}
.select2-search__field{
    background-color: #000;
}

并且对于选项列表

.select2-results { 
    background-color: #000;
}

- Rana Hyder

Answer 4

一些更多片段如下所示，我覆盖了CSS以改变Select2下拉选择的外观，以适应我的自定义黑色主题。 （我使用Bootstrap 5）

通过CDN访问非压缩的CSS文件以查找需要覆盖的部分，经过试错，我得出了以下结论： https://apalfrey.github.io/select2-bootstrap-5-theme/getting-started/basic-usage/

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

- OJB1

Answer 5

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

- ASSILI Taher

---

你的回答可以通过添加更多关于代码的信息以及它如何帮助提问者来改进。 - Tyler2P

Answer 6

经过测试，对于 禁用的 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;
        }

- Khribi Wessim

Answer 7

选择2个适用于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;
}

- Sender