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

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

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

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

Answer 5

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

如果你想知道为什么你从来没有使用过这些，他们weren't properly documented 不久前。

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

Answer 6

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

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

例如，如果我想修改应用 Select2 的元素#myelement，然后要更改颜色，我会在我的 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;
    }