如何设计一个jQuery Select2组合框的容器？

Question

是否可以使用Select2 jQuery插件对组合框容器进行设计？我可以成功设置出现自动完成选择的下拉菜单菜单，但不能在其中输入文本的容器。这是我在做什么：

$(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元素的版本具有圆角等。如果这意味着您在使用隐藏输入时无法对容器进行样式设置，那么它似乎是一个奇怪的限制。

EDIT2：
@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 
    }); 
}); 

我认为这将导致一个问题，不过，任何其他选择二组合框在同一页上可见。

Answer 1

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

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