如何设置jQuery Select2组合框的容器样式

How to style the container of a jQuery Select2 combo box?

本文关键字：组合 样式 Select2 jQuery 何设置 设置      更新时间：2023-09-26

是否可以使用Select2jQuery插件对组合框容器进行样式设置？我可以成功地设置下拉菜单的样式，其中显示自动完成选择，但不显示输入文本的容器。我在做什么：

$(document).ready(function() {
    $("#combo").select2({
        data:[{id:0,text:'One'},{id:1,text:'Two'}],
        multiple: true,
        createSearchChoice: function (term) {
            return { id: term, text: term };
        },
        containerCss: 'container',
        dropdownCssClass: 'dropdown',
        containerCss: {
            background: 'green'   
        }
    });
});
<input type="hidden" id="combo" style="width:350px" />
#combo {
    background: green;
}
.container {
    background: green;
}
.dropdown {
    background: red;
}

容器应该是绿色的，但事实并非如此。这是一把小提琴。

编辑：
我在该网站的文档页面上注意到（它非常全面），我尝试做的每一个示例（带有动态加载选项的隐藏输入字段）都有相同的标准样式，就像我的示例fiddle中一样。然而，源自select元素的版本有圆角等。如果这意味着在使用隐藏输入时不能对容器进行样式设置，那么这似乎是一个奇怪的限制。

第2版：
@emmanuel已经提供了一个解决方案，但由于我实际上是在边界半径之后，要让它正常工作还有很多工作要做。在设置了所有角的半径后，打开下拉列表会在下拉列表的顶部和容器的底部之间出现圆角，这有点难看。你可以这样做来修复它：

$('ul.select2-choices').on("select2-open", function() {
    $('ul.select2-choices').css({
        'border-bottom-left-radius': '0px',
        'border-bottom-right-radius': '0px',
    });
});
$('ul.select2-choices').on("select2-close", function() { 
    $('ul.select2-choices').css({
        'border-bottom-left-radius': '5px', // or whatever
        'border-bottom-right-radius': '5px', // or whatever
    });
});

不过，我认为这会给同一页面上可见的任何其他Select2组合框带来问题。

为了向容器添加背景色，您必须将规则放入#s2id_combo。问题是ul.select2-choices已经有了一个背景，它在容器上，所以你必须添加：

ul.select2-choices { background: green !important; }
相关文章：