Как изменить css цвета тегов select2?

для форматирования тегов можно использовать функцию formatSelectionCssClass.

$("#mySelect").select2({
    formatSelectionCssClass: function (data, container) { return "myCssClass"; },
});

или вы можете добавить класс css на основе идентификатора опции:

$("#mySelect").select2({
    formatSelectionCssClass: function (data, container) { return data.id; },
});

помните, что вам нужно будет переопределить как фильтр, так и background_color в вашем классе css

в моем случае мне нужно было показать разницу между тегами, которые были "выбраны" и теми, которые были добавлены.

помощь здесь была для предыдущих версий select2, и не много пользы. Используя текущую версию 4.0 (с ее ужасно разреженной документацией), я смог добиться этого, используя функции шаблона и немного "ума".

первым шагом является шаблон результатов (следует отметить, что при каждом выборе или удалении действия это увольняется за каждый выбор в коробке). Это обычно возвращает только текст, который будет идти в результирующем LI... однако мы хотим обернуть этот текст в промежуток (и сказать S2 не удалять HTML, возвращая объект) с помощью пользовательского класса CSS для нашего типа. В моем примере я использую selected свойство для определения этого:

$('.select2_sortable').select2({
    tags: true,
    templateSelection: function(selection) {
        if(selection.selected) {
            return $.parseHTML('<span class="im_selected">' + selection.text + '</span>');
        }
        else {
            return $.parseHTML('<span class="im_writein">' + selection.text + '</span>');
        }
    }
});

ваш результирующий HTML после выбора элемента должен быть примерно таким:

<ul class="select2-selection__rendered ui-sortable" id="select2_rendered_smartselectbox_4">
    <li class="select2-selection__choice" title="John Doe">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
        <span class="im_selected">John Doe</span>
    </li>
    <li class="select2-selection__choice" title="fdfsdfds">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
    <span class="im_writein">fdfsdfds</span>
    </li>
    <li class="select2-search select2-search--inline ui-sortable-handle">
        <input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;">
    </li>
</ul>

но этого недостаточно, так как нам нужен доступ родитель ли, а не ребенок span. И поскольку CSS не допускает родительских селекторов, мы должны запустить jQuery, чтобы это произошло. Поскольку они перерисованы, мы хотим запустить эту функцию на обоих select и remove события элемента Select2:

$('.select2_sortable').on("select2:select", function (ev) {
    updateSelectedParents();
});
$('.select2_sortable').on("select2:removed", function (ev) {
    updateSelectedParents();
});

function updateSelectedParents() {
    $('.im_selected').closest('li').addClass('im_connected_item');
    $('.im_writein').closest('li').addClass('im_writein_item');
}

наконец, в результате:

<ul class="select2-selection__rendered ui-sortable" id="select2_rendered_smartselectbox_4">
    <li class="select2-selection__choice im_connected_item" title="John Doe">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
        <span class="im_selected">John Doe</span>
    </li>
    <li class="select2-selection__choice im_writein_item" title="fdfsdfds">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
    <span class="im_writein">fdfsdfds</span>
    </li>
    <li class="select2-search select2-search--inline ui-sortable-handle">
        <input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;">
    </li>
</ul>

и позволяет вам стилизовать свои элементы на основе im_writein_item и im_connected_item CSS-классы.

использовать formatResultCssClass, containerCssClass и dropdownCssClass опции для указания классов в коде,adaptContainerCssClass и adaptDropdownCssClass параметры для указания классов в разметке или даже containerCss и dropdownCss параметры для указания встроенного стиля в коде.

Если вам интересно, почему вы никогда не использовали их, они не были должным образом задокументированы некоторое время назад.

ссылка: http://ivaynberg.github.io/select2/>

вы можете получить доступ к контейнеру тег такой:

formatSelectionCssClass = function(tag, container) {
    $(container).parent().addClass("my-css-class");
};

для тех, кто только хочет изменить цвет некоторых полей select2:

вместо прямого изменения свойств CSS Select2 select2-choice напрямую используйте идентификатор, сгенерированный select2 для div select2 (это будет #s2id_yourelementid), чтобы выбрать его дочерние элементы, несущие класс select2-choice.

например, если я хочу изменить элемент #myelement, к которому я применяю Select2, а затем изменить цвет, я бы добавил следующее в свой css:

#s2id_myelement > .select2-choice{
     background-color:blue;
} 

добавление этого CSS работало для меня:

.select2-selection__choice {
  background-color: red !important;
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0);
  background-image: -webkit-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: -moz-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: -o-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: -ms-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  color: white !important;
  border: 1px solid #aaaaaa !important;
}

Пример Скрипку:

http://jsfiddle.net/sajjansarkar/hvsvcc5r/

(да, я сошел с ума от цветов, чтобы продемонстрировать свою точку зрения; -))