如何更改select2标签的颜色的CSS?

我刚开始使用项目从一个选择框显示多个标签,它的工作非常好,谢谢图书馆.

我只需要修改多值选择框中显示的标签的颜色或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"; }
                });
首先 – 一个警告,这意味着您覆盖了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
}
相关文章
相关标签/搜索