Select2 드롭 다운 선택 상자의 스타일 지정

Question

프로젝트에서 Select2를 사용하여 검색 상자에 일부 선택 상자의 스타일을 지정합니다. 나는 검정 그라데이션에있는 화살표 컨테이너의 그라데이션 배경을 변경 관리 : 나는 화살표 흰색 싶습니다

.select2-container .select2-choice .select2-arrow { 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303)); 
    background-image: -moz-linear-gradient(top, #424242, #030303); 
    background-image: -ms-linear-gradient(top, #424242, #030303); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303)); 
    background-image: -webkit-linear-gradient(top, #424242, #030303); 
    background-image: -o-linear-gradient(top, #424242, #030303); 
    background-image: linear-gradient(#424242, #030303); 
} 

,하지만 불행히도 선택 2 대신 글꼴 최고 또는 다른 아이콘의 배경 이미지를 사용하고 있습니다 비슷한 CSS를 사용하여 색상을 변경하는 방법은 없습니다.

기본 회색 대신 화살표를 흰색으로 만드는 가장 쉬운 방법은 무엇입니까? 배경 png (select2.png 및 select2x2.png)를 내 자신의 것으로 대체해야합니까? 아니면 더 쉬운 방법이 있습니까?

내가 가지고있는 또 다른 질문은 선택 상자의 높이를 변경하는 방법입니다. 열린 상태에서 드롭 다운 상자의 높이를 변경하는 방법을 알고 있지만 닫힌 상태에서 선택 상자의 높이를 변경하고 싶습니다. 어떤 아이디어?

Answer 1

의견에 제안 해 주셔서 감사합니다. 나는 내 자신의 이미지를 만들 필요없이 내가 원하는 것을 얻기 위해 좀 더러운 해킹을했다. 에,

$('b[role="presentation"]').hide(); 

그때 글꼴 멋진 내 페이지에 포함 된 자바 스크립트의 라인 다시 내 아래로 자신의 화살표를 추가 : 자바 스크립트로 내가 처음과 같이, 아래쪽 화살표에 사용되고있는 기본 태그를 숨기

$('.select2-arrow').append('<i class="fa fa-angle-down"></i>'); 

그런 다음 CSS를 사용하여 선택 상자의 스타일을 지정합니다.

가

.select2-container .select2-choice { 
    padding: 5px 10px; 
    height: 40px; 
    width: 132px; 
    font-size: 1.2em; 
} 

.select2-container .select2-choice .select2-arrow { 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303)); 
    background-image: -moz-linear-gradient(top, #424242, #030303); 
    background-image: -ms-linear-gradient(top, #424242, #030303); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303)); 
    background-image: -webkit-linear-gradient(top, #424242, #030303); 
    background-image: -o-linear-gradient(top, #424242, #030303); 
    background-image: linear-gradient(#424242, #030303); 
    width: 40px; 
    color: #fff; 
    font-size: 1.3em; 
    padding: 4px 12px; 
} 

결과는 방식 스타일링이다 I 흰색으로 폭, 폰트 크기 및 아래쪽 화살표 또한 색상, 그래디언트 검은 화살표 영역의 배경색을 변경하는 변경 높이를 설정할 내가 원하는 :

업데이트 2015년 5월 6일 @Katie 레이스는 클래스 이름이 선택 2의 버전 4에서 변경 한 다른 답변에서 언급 한 바와 같이. 새로운 클래스 이름과 함께 업데이트 된 CSS는 다음과 같아야합니다

.select2-container--default .select2-selection--single{ 
    padding:6px; 
    height: 37px; 
    width: 148px; 
    font-size: 1.2em; 
    position: relative; 
} 

.select2-container--default .select2-selection--single .select2-selection__arrow { 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303)); 
    background-image: -moz-linear-gradient(top, #424242, #030303); 
    background-image: -ms-linear-gradient(top, #424242, #030303); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303)); 
    background-image: -webkit-linear-gradient(top, #424242, #030303); 
    background-image: -o-linear-gradient(top, #424242, #030303); 
    background-image: linear-gradient(#424242, #030303); 
    width: 40px; 
    color: #fff; 
    font-size: 1.3em; 
    padding: 4px 12px; 
    height: 27px; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    width: 20px; 
} 

JS :

여기

$('b[role="presentation"]').hide(); 
$('.select2-selection__arrow').append('<i class="fa fa-angle-down"></i>'); 

Answer 2

위의 작업 예입니다. http://jsfiddle.net/z7L6m2sc/ 이제 select2가 업데이트되었으므로 클래스를 변경하면 작동하지 않을 수 있습니다. 여기에 CSS를 ....

.select2-dropdown.select2-dropdown--below{ 
    width: 148px !important; 
} 

.select2-container--default .select2-selection--single{ 
    padding:6px; 
    height: 37px; 
    width: 148px; 
    font-size: 1.2em; 
    position: relative; 
} 

.select2-container--default .select2-selection--single .select2-selection__arrow { 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303)); 
    background-image: -moz-linear-gradient(top, #424242, #030303); 
    background-image: -ms-linear-gradient(top, #424242, #030303); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303)); 
    background-image: -webkit-linear-gradient(top, #424242, #030303); 
    background-image: -o-linear-gradient(top, #424242, #030303); 
    background-image: linear-gradient(#424242, #030303); 
    width: 40px; 
    color: #fff; 
    font-size: 1.3em; 
    padding: 4px 12px; 
    height: 27px; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    width: 20px; 
} 

Answer 3

이 난 자리 화살표의 색상을 변경하는 방법입니다, 당신은 당신이 원하는 색으로 #fff을 변경해야, 2 개 클래스는 드롭 다운 오픈하고 드롭 다운 폐쇄 :

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { 
    border-color: transparent transparent #fff transparent !important; 
    } 
    .select2-container--default .select2-selection--single .select2-selection__arrow b { 
    border-color: #fff transparent transparent transparent !important; 
    }