如何改变select2标签的css颜色?

I just started using project for showing multiple tags from a select box and it works great, thanks for the library.

我刚开始使用project，从一个选择框中显示多个标记，它非常好用，谢谢您的库。

I just need to modify the color or css of the tags shown in multi-value select-boxes. Right now the color of the tag is shown as grey and I would like to change that to some other color according to the type of the tag. Or at least is there a way to change the default color?

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

Also is it possible to change the css class of tags? There is an option such as formatResultCssClass but when I tried to add css classes through that property nothing changed, I would appreciate if someone can show an example how to do this?

是否有可能改变css类的标签?有一个选项，比如formatResultCssClass，但是当我尝试通过这个属性添加css类时，没有发生任何变化，如果有人能给我一个例子，告诉我怎么做，我会很感激。

Edit: Workaround for solving the problem: Add a new property to the select2.defaults for representing classes of selected objects.

编辑:解决问题的变通方法:向select2.default添加一个新属性，用于表示所选对象的类。

$.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;
...

And initialize select2 using this new property:

并使用这个新属性初始化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"; }
                });

7 个解决方案

#1

First up - a warning that this means you are overriding the CSS that is internal to select2, so if select2 code changes at a later date, you will also have to change your code. There is no formatChoiceCSS method at the moment (though it would be useful).

首先是一个警告，这意味着您要重写select2的内部CSS，因此如果select2代码在以后更改，您还必须更改代码。目前还没有formatChoiceCSS方法(尽管它很有用)。

To change the default color, you will have to override the various CSS properties of the tag which has this CSS class:

要更改默认颜色，您必须重写标记的各种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;
}

To change the class of each tag based on the text or option # of that tag, you will have to add a change event:

要根据标记的文本或选项#更改每个标记的类，您必须添加一个更改事件:

$("#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');
      }
});

And you can define a custom background-color etc in this class:

你可以在这个类中定义一个自定义背景色等等:

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

#2

For formatting the tags you can use the function formatSelectionCssClass.

要格式化标记，可以使用formatSelectionCssClass函数。

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

Or you could add a css class based on the option id:

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

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

Remember that you will need to override both filter and background_color in your css class

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

#3

In my case I needed to show the difference between tags that were "selected" and those which were being added.

在我的示例中，我需要显示“已选择”的标记和正在添加的标记之间的差异。

The help here was for the previous versions of select2, and not of much use. Using the current 4.0 version (with its terribly sparse documentation) I was able to achieve this using the template functions and a little bit of 'cleverness'.

这里的帮助是针对select2的以前版本的，没有多大用处。使用当前的4.0版本(包含极其稀疏的文档)，我能够使用模板函数和一点点“聪明”来实现这一点。

First step is to template the results (it should be noted that on every select or remove action this is fired for every selection in the box). This normally returns JUST the text that will go in the resulting LI... however we want to wrap that text in a span (and tell S2 not to strip the HTML out by returning an object) with a custom CSS class for our type. In my example I use the selected property to determine this:

第一步是对结果进行模板化(应该注意，在每一个选择或删除操作中，这将在框中的每个选择中触发)。这通常只返回结果LI中的文本……但是，我们希望用一个自定义的CSS类来为我们的类型包装这个文本(并告诉S2不要通过返回一个对象来去掉HTML)。在我的示例中，我使用所选的属性来确定:

$('.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>');
        }
    }
});

Your resulting HTML after an item is selected should be something like this:

选择一个项目后的结果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>

But this isn't enough, as we need to access the parent LI, not the span child. And since CSS doesn't allow for parent selectors, we have to run some jQuery to make it happen. Because these are redrawn we'll want to run this function on both the select and remove events of the Select2 item:

但这还不够，因为我们需要访问父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');
}

Finally resulting in:

最后导致:

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

And allowing you to style your elements based on the im_writein_item and im_connected_item CSS classes.

并允许您基于im_writein_item和im_connected_item CSS类对元素进行样式化。

#4

Use the formatResultCssClass, containerCssClass and dropdownCssClass options to specify classes in code, the adaptContainerCssClass and adaptDropdownCssClass options to specify classes in markup, or even the containerCss and dropdownCss options to specify inline style in code.

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

If you're wondering why you never used those, they weren't properly documented a while ago.

如果你想知道为什么你从未使用过它们，那么它们在一段时间之前并没有被正确地记录下来。

Reference: <http://ivaynberg.github.io/select2/>

参考:< http://ivaynberg.github.io/select2/ >

#5

You can access the tag container like this:

您可以这样访问标记容器:

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

#6

For those that only want to change the color of some of the select2 boxes:

对于那些只想更改select2中某些框的颜色的用户:

Instead of directly modifying the Select2 CSS properties of select2-choice directly, use the ID generated by select2 for the select2 div (this will be #s2id_yourelementid) to select its children carrying the select2-choice class.

与其直接修改Select2 -choice的Select2 CSS属性，不如使用Select2为Select2 div(这将是# s2id_yourelenced)生成的ID来选择包含Select2 -choice类的子元素。

For example, if I want to modify an element, #myelement, that I apply Select2 to, then to change the color, I would add the following to my css:

例如，如果我想修改一个我应用Select2的元素#myelement，然后要更改颜色，我将在我的css中添加以下内容:

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

#7

Adding this CSS worked for me:

添加这个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;
}

Example Fiddle:

示例小提琴:

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

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

(yes I went crazy with the colors to demonstrate my point ;-) )

(是的，我疯狂地用颜色来证明我的观点;-)