如何更改select2标签颜色的css？
Posted
技术标签:
【中文标题】如何更改select2标签颜色的css？【英文标题】：How to change the css of color of select2 tags? 【发布时间】：2012-12-29 16:12:11 【问题描述】：我刚开始使用项目从选择框中显示多个标签，效果很好，感谢库。
我只需要修改多值选择框中显示的标签的颜色或 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";
);
【问题讨论】：
【参考方案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
【讨论】：
这是正确的答案，基于对文档的更新。谢谢。 @DuaneJ 有什么更新？我在官方文档中找不到对formatSelectionCssClass 的单一引用。
这行不通，这是一个小提琴：jsfiddle.net/sajjansarkar/o3eem7s0/1你能发一个例子吗？【参考方案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
【讨论】：
我实际上做了类似的事情 =) 我在代码中添加了 formatChoiceCSS 的属性，并使用该属性添加新的 css 类并删除了 select2-search-choice 的属性。感谢您的回答 如果我们按照您的回答在条件基础上的特定标签上添加 css，那么如果我们删除任何标签，那么 css 也会从标签中删除。【参考方案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 类设置元素的样式。
【讨论】：
【参考方案4】：你可以像这样访问标签容器：
formatSelectionCssClass = function(tag, container)
$(container).parent().addClass("my-css-class");
;
【讨论】：
parent() 是我所缺少的！【参考方案5】：使用formatResultCssClass、containerCssClass 和dropdownCssClass 选项在代码中指定类，使用adaptContainerCssClass 和adaptDropdownCssClass 选项在标记中指定类，甚至使用containerCss 和dropdownCss 选项来指定类在代码中指定内联样式。
如果你想知道为什么你从来没有使用过这些，他们weren't properly documented 不久前。
参考：http://ivaynberg.github.io/select2/>
【讨论】：
【参考方案6】：对于那些只想更改某些 select2 框颜色的人：
不要直接修改select2-choice的Select2 CSS属性，而是使用select2为select2 div生成的ID（这将是#s2id_yourelementid）来选择它携带select2-choice类的子节点。
例如，如果我想修改应用 Select2 的元素#myelement，然后要更改颜色，我会在我的 css 中添加以下内容：
#s2id_myelement > .select2-choice
background-color:blue;
【讨论】：
【参考方案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/
（是的，我疯狂地用颜色来证明我的观点 ;-)）
【讨论】：
【参考方案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;
【讨论】：
以上是关于如何更改select2标签颜色的css？的主要内容，如果未能解决你的问题，请参考以下文章