Как изменить css цвета тэгов select2? - программирование
Подтвердить что ты не робот

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

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

Мне просто нужно изменить цвет или css тегов, показанных в многопозиционных select-box. В настоящее время цвет тега отображается как серый, и я хотел бы изменить его на другой цвет в соответствии с типом тега. Или, по крайней мере, есть способ изменить цвет по умолчанию?

Также возможно изменить класс тегов css? Существует такой параметр, как formatResultCssClass, но когда я попытался добавить классы css через это свойство, ничего не изменилось, я был бы признателен, если кто-нибудь может показать пример, как это сделать?

Изменить: обходной путь для решения проблемы: Добавьте новое свойство в select2.defaults для представления классов выбранных объектов.

$.fn.select2.defaults = {
...
    selectedTagClass: "",
...
}

addSelectedChoice: function (data) {
        var choice=$(
            "<li class='select2-search-choice " + this.opts.selectedTagClass + "'>" +
            "    <div><a href='#' onclick='return false;' class='select2-search-choice-close' tabindex='-1'><i class='icon-remove icon-white'/></a></div>" +
            "</li>"),
        id = this.id(data),
        val = this.getVal(),
        formatted;
...

И инициализируйте select2 с помощью этого нового свойства:

$(".#select2Input").select2({placeholder: "Please Select Country", 
                    selectedTagClass: 'label label-info', // label label-info are css classes that will be used for selected elements
                    formatNoMatches: function () { return "There isn't any country similar to entered query"; }
                });
4b9b3361

ОТВЕТЫ

Ответ 1

Сначала - предупреждение, что это означает, что вы переопределяете CSS, который является внутренним для select2, поэтому, если код select2 изменится позже, вам также придется изменить свой код. На данный момент метода formatChoiceCSS нет (хотя это было бы полезно).

Чтобы изменить цвет по умолчанию, вам придется переопределить различные свойства CSS тега, который имеет этот класс CSS:

.select2-search-choice {
    background-color: #56a600;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    color: #333;
    border: 1px solid #aaaaaa;
}

Чтобы изменить класс каждого тега на основе текста или опции # этого тега, вам нужно будет добавить событие изменения:

$("#select2_element").on("change", function(e) { 
      if (e.added) {
          // You can add other filters here like
          // if e.val == option_x_of_interest or
          // if e.added.text == some_text_of_interest
          // Then add a custom CSS class my-custom-css to the <li> added
          $('.select2-search-choice:not(.my-custom-css)', this).addClass('my-custom-css');
      }
});

И вы можете определить пользовательский фоновый цвет и т.д. в этом классе:

li.my-custom-css {
       background-color: // etc etc
}

Ответ 2

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

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

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

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

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

Ответ 3

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

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

Первый шаг заключается в шаблоне результатов (следует отметить, что при каждом выборе или удалении действие запускается для каждого выбора в поле). Это обычно возвращает JUST текст, который будет отображаться в полученном 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>

Но этого недостаточно, так как нам нужно получить доступ к родительскому LI, а не по каналу 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.

Ответ 4

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

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

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

Ответ 5

Вы можете получить доступ к контейнеру тега следующим образом:

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

Ответ 6

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

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

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

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

Ответ 7

Добавление 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/

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