CSS 如何更改select2标签颜色的css？

How to change the css of color of select2 tags?

提问by cubbuk

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

我刚开始使用项目从选择框中显示多个标签，效果很好，感谢图书馆。

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

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"; }
                });

采纳答案by mccannf

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

回答by trgt

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

回答by Denny

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 selectedproperty to determine this:

第一步是对结果进行模板化（应该注意的是，在每个选择或删除操作中，都会为框中的每个选择触发）。这通常只返回将出现在结果 LI 中的文本......但是我们想用我们的类型的自定义 CSS 类将该文本包装在一个跨度中（并告诉 S2 不要通过返回一个对象来剥离 HTML）。在我的示例中，我使用该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>');
        }
    }
});

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 selectand removeevents 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_itemand im_connected_itemCSS classes.

并允许您根据im_writein_item和im_connected_itemCSS 类设置元素样式。

回答by Leo

You can access the tag container like this:

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

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

回答by ManGI1

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 生成的 ID（这将是 #s2id_yourelementid）来选择其带有 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;
} 

回答by tne

Use the formatResultCssClass, containerCssClassand dropdownCssClassoptions to specify classes in code, the adaptContainerCssClassand adaptDropdownCssClassoptions to specify classes in markup, or even the containerCssand dropdownCssoptions 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 documenteda while ago.

如果您想知道为什么您从未使用过它们，那么不久前它们没有被正确记录。

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

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

回答by Sajjan Sarkar

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

（是的，我疯狂地用颜色来证明我的观点；-)）

回答by Mohammad Maseeh Uzzama

I use below

我在下面使用

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