[英]select2 change background color
我正在尝试在我正在创建的网页上使用 select2。 但是 combobox 背景似乎是透明的,但我需要将其更改为另一种颜色。 我尝试修改select2.css
文件,但似乎没有任何效果。 有任何想法吗?
如果您尝试定位组合框包装器,请使用
.select2-search { background-color: #00f; }
如果您尝试针对输入使用
.select2-search input { background-color: #00f; }
如果您尝试定位结果包装器,请使用
.select2-results { background-color: #00f; }
希望这可以帮助!
帮助OP有点晚了,但我会留下这个答案,希望它可以帮助某人。
我不知道其他版本,但使用 select2-rails 3.5.9.3(根据他们的github 页面意味着正在使用的 select2 版本是 3.5)我只能按如下方式更改背景颜色:
.select2-choice { background-color: #00f !important; }
不过,马修提到的结果选择器有效。
无论如何,我没有尝试使用“vanilla select2”,所以我不知道这种情况是否有什么不同。
对于组合框
.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;
}
下面还有一些片段,我覆盖了 CSS 以更改 Select2 下拉列表 select 的外观以适合我的自定义深色主题。 (我正在使用 Bootstrap 5)
https://apalfrey.github.io/select2-bootstrap-5-theme/getting-started/basic-usage/
我通过 CDN 访问了非缩小的 css 文件,以找到我需要覆盖的位,通过反复试验,我得出以下结论:
/* ------------------------------------- */
/* ---------- 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;
}
我正在尝试在要创建的网页上使用select2。 但是,组合框背景似乎是透明的,但是我需要将其更改为另一种颜色。 我尝试修改select2.css
文件,但似乎没有任何效果。 有任何想法吗 ?
使用禁用的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;
}
.select2-selection
{
background-color: #f5f5f5 !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.