如何改变select2标签的颜色？

Question

我刚开始使用项目从选择框中显示多个标签,并且它非常好用,感谢库.

我只需要修改多值选择框中显示的标签的颜色或css.现在标签的颜色显示为灰色,我想根据标签的类型将其更改为其他颜色.或者至少有办法改变默认颜色？

还可以更改标签的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"; }
                });

Answer 1

要格式化标记,可以使用formatSelectionCssClass函数.

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

或者您可以根据选项ID添加css类:

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

请记住,您需要在css类中覆盖filter和background_color

Answer 2

首先 - 警告这意味着您要覆盖select2内部的CSS,因此如果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
}