Стили выпадающего списка Select2

Я использую 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);
}

Я хотел бы, чтобы стрелка была белой, но, к сожалению, Select2 использует фоновое изображение для разных значков, а не для шрифтов или что-то подобное, поэтому нет способа просто изменить цвет с помощью CSS.

Что было бы самым простым способом сделать белую стрелку вместо серого по умолчанию? Действительно ли мне нужно заменить фон png (select2.png и select2x2.png) на свой собственный? Или есть более простой способ?

Еще один вопрос: как изменить высоту полей выбора. Я знаю, как изменить высоту раскрывающегося окна в открытом состоянии, но я хочу изменить высоту selectbox в закрытом состоянии. Любые идеи?

ОТВЕТЫ

Ответ 1

Спасибо за предложения в комментариях. Я сделал немного грязного взлома, чтобы получить то, что я хочу, не создавая свой собственный образ. С javascript я сначала скрою тег по умолчанию, который используется для стрелки вниз, например:

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

Затем я включил шрифт-awesome на моей странице и добавил свою собственную стрелку вниз, снова с помощью строки javascript, чтобы заменить стандартную:

$('.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;
}

В результате получается стиль, который я хочу:

screenshot

Обновление 5/6/2015 Как сказал @Katie Lacy в другом ответе, имена классов были изменены в версии 4 Select2. Обновленный 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>');

Ответ 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;
}

Ответ 3

Вот как я изменил цвет стрелки-заполнителя, 2 класса для раскрывающегося раскрывающегося списка и раскрывающегося списка закрыты, вам нужно изменить #fff на нужный цвет:

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