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

Question

是否可以使用 Select2 jQuery 插件设置组合框 container 的样式？我可以成功地设置出现自动完成选择的 dropdown 菜单的样式，但不能设置输入文本的容器的样式。这就是我正在做的事情：

$(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。

编辑：
我在该网站的文档页面（非常全面）上注意到，我尝试做的每个示例（具有动态加载选项的隐藏输入字段）都具有相同的标准样式，就像在我的示例小提琴中一样。但是，源自选择元素的版本具有圆角等。如果这意味着您在使用隐藏输入时无法设置容器样式，这似乎是一个奇怪的限制。

编辑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 组合框造成问题。

Answer 1

为了给容器添加背景颜色，您必须将规则设置为#s2id_combo。问题是ul.select2-choices 已经有一个背景并且它在容器之上，所以你必须添加：

ul.select2-choices { background: green !important; }