如何改变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
}

Answer 3

在我的情况下，我需要显示“已选择”的标签与正在添加的标签之间的区别。

这里的帮助是针对之前版本的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>

但这还不够，因为我们需要访问父LI，而不是span子。由于CSS不允许父选择器，我们必须运行一些jQuery来实现它。因为这些是重新绘制的，我们要在Select2项的select和remove事件上运行此函数：

$('.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类设置元素的样式。

Answer 4

使用formatResultCssClass，containerCssClass和dropdownCssClass选项在代码中指定类，使用adaptContainerCssClass和adaptDropdownCssClass选项指定标记中的类，甚至containerCss和dropdownCss选项，用于在代码中指定内联样式。

如果你想知道为什么你从未使用过它们，那么他们weren't properly documented前一段时间。

参考：＆lt; http://ivaynberg.github.io/select2/＆gt;

Answer 5

您可以像这样访问标记容器：

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

Answer 6

对于那些只想更改某些select2框颜色的人：

不要直接直接修改select2-choice的Select2 CSS属性，而是使用select2为select2 div生成的ID（这将是＃s2id_yourelementid）来选择带有select2-choice类的子项。

例如，如果我想修改一个元素#myelement，我将Select2应用于，然后更改颜色，我会将以下内容添加到我的CSS中：

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

Answer 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/

（是的我用颜色疯了以证明我的观点;-)）

Answer 8

我在下面使用

    .form-control{
        border: 1px solid #cccccc!important;
    }
    .select2-container .select2-selection--single {
        height: 48px !important;
        padding: 10px;
        border-radius: 0px;
        border: 1px solid #cccccc;
    }
    .select2-container .select2-selection--multiple {
        height: 48px !important;
        padding: 5px;
        border-radius: 0px;
        border: 1px solid #cccccc;
    }