如何更改select2标签的颜色css？ [英] How to change the css of color of select2 tags?
问题描述
我刚刚开始使用项目从一个选择框显示多个标签，它的工作伟大，感谢图书馆。
我只需要修改颜色或css的多值选择框中显示的标签。现在，标签的颜色显示为灰色，我想根据标签的类型将其更改为其他颜色。或者至少有一种方法来改变默认颜色？
也可以更改标签的css类别？有一个选项，例如 formatResultCssClass 但是当我试图通过该属性添加css类没有改变，我会感激，如果有人可以显示一个例子如何做到这一点？ p>
编辑：解决问题的解决方法：
向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数据），
val = this.getVal（），
格式化;
...
使用此新属性初始化select2：
$（。＃select2Input）。select2（{placeholder：Please Select Country，
selectedTagClass：'label label-info' ，// label label-info是将用于所选元素的css类。
formatNoMatches：function（）{return没有任何类似于输入查询的国家;}
}）;
首先 - 警告这意味着你正在覆盖CSS内部的select2，所以如果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），色停（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）。 （e）{
if（e.added）{
//您可以在这里添加其他过滤器如
//如果e.val == option_x_of_interest或
//如果e .added.text == some_text_of_interest
//然后向< li>添加一个自定义CSS类my-custom-css
$（'。select2-search-choice：not（.my- custom-css）'，this）.addClass（'my-custom-css'）;
}
}
您可以在此类中定义自定义背景颜色等：
li.my-custom-css {
background-color：// etc etc
}
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?
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?
Edit: Workaround for solving the problem: Add a new property to the select2.defaults for representing classes of selected objects.
$.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:
$(".#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"; }
});
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).
To change the default color, you will have to override the various CSS properties of the tag which has this CSS class:
.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
}
这篇关于如何更改select2标签的颜色css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
