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 
    }); 
}); 

내가 같은 페이지에 보이는 다른 선택 2 콤보 상자를 위해, 그러나,이 문제가 발생할 것이라 생각합니다.

Answer 1

컨테이너에 배경색을 추가하려면 규칙을 #s2id_combo에 넣어야합니다. 문제는 ul.select2-choices 이미 배경을 가지고 있다는 것입니다 그리고 당신은 추가 할 필요가 있도록 컨테이너 끝났어 :

이

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