Kiểu dáng của các hộp chọn Select2 thả xuống

Question

Tôi đang sử dụng Select2 trong một dự án để tạo kiểu cho một số hộp chọn trong biểu mẫu tìm kiếm. Tôi quản lý để thay đổi nền gradient của mũi tên container để một gradient đen:

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

Tôi muốn mũi tên để có màu trắng, nhưng tiếc là Select2 đang sử dụng hình nền cho các biểu tượng khác nhau thay vì font-awesome hoặc một cái gì đó tương tự, do đó, không có cách nào để chỉ thay đổi màu sắc với CSS.

Cách dễ nhất để làm cho mũi tên màu trắng thay vì màu xám mặc định là gì? Tôi có thực sự phải thay thế nền png (select2.png và select2x2.png) bằng chính bản thân mình không? Hoặc là có một phương pháp dễ dàng hơn?

Một câu hỏi khác mà tôi có là cách thay đổi chiều cao của các hộp chọn. Tôi biết làm thế nào để thay đổi chiều cao của hộp thả xuống trong trạng thái mở, nhưng tôi muốn thay đổi chiều cao của hộp chọn trong trạng thái đóng. Bất kỳ ý tưởng?

Answer 1

Cảm ơn các đề xuất trong nhận xét. Tôi đã thực hiện một chút của một hack bẩn để có được những gì tôi muốn mà không cần phải tạo ra hình ảnh của riêng tôi. Với javascript lần đầu tiên tôi giấu thẻ mặc định mà đang được sử dụng cho vào mũi tên xuống, như vậy:

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

sau đó tôi bao gồm font-tuyệt vời trong trang của tôi và thêm mũi tên riêng xuống của tôi, một lần nữa với một dòng javascript, để thay thế mặc định một:

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

Sau đó, với CSS tôi tạo kiểu cho các hộp chọn. Tôi đặt chiều cao, thay đổi màu nền của khu vực mũi tên thành màu đen, thay đổi chiều rộng, kích thước phông chữ và cũng có màu của mũi tên xuống thành màu trắng:

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

Kết quả là tạo kiểu tôi muốn nó:

cập nhật 2015/05/06 Như @Katie Lacy đề cập trong câu trả lời khác classnames đã được thay đổi trong phiên bản 4 của Select2. CSS được cập nhật với classnames mới sẽ trông như thế này:

.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

Dưới đây là một ví dụ làm việc của trên. http://jsfiddle.net/z7L6m2sc/ Bây giờ select2 đã được cập nhật các lớp học có thay đổi có thể là lý do tại sao bạn không thể làm cho nó hoạt động. Dưới đây là 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

Đây là cách tôi thay đổi giữ chỗ mũi tên màu, 2 lớp dành cho thả xuống mở và thả xuống đóng, bạn cần phải thay đổi #fff đến màu sắc mà bạn muốn:

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