[英]Changing font color of selected item by user with select2
I've simple select option html: 我有简单的选择选项html:
<select name="individual_taxCountry" id="individual_taxCountry" class="select2">
<option value="" selected="selected" class="selected">Select a country</option>
<option value="Afghanistan" >Afghanistan</option>
<option value="Aland Islands" >Aland Islands</option>
<option value="Albania" >Albania</option>
<option value="Algeria" >Algeria</option>
<option value="Zambia" >Zambia</option>
<option value="Zimbabwe" >Zimbabwe</option>
</select>
I am using select2 for this: 我为此使用select2:
$(document).ready(function(){
$(".select2").select2();
});
And I also customized the way the select looks with this css: 我还使用此CSS自定义了select的外观:
.select2-container--default .select2-selection--single
{
background-color: #21262d;
border-color: #21262d;
border-top-color: #21262d;
border-right-color-value: #21262d;
border-bottom-color: #21262d;
border-left-color-value: #21262d;
height: 34px;
}
It looks the way I want but I would like to change the color to white for the font of the selected item when user does that. 它看起来像我想要的样子,但是当用户这样做时,我想将所选项目的字体的颜色更改为白色。 How can I accomplish that?
我该怎么做?
http://jsfiddle.net/bhuffprL/ http://jsfiddle.net/bhuffprL/
EDIT: Because not everyone seems to understand my goal - I want to change to white (fff) color ONLY WHEN user selects his/her own item from the list. 编辑:因为不是每个人似乎都了解我的目标- 仅当用户从列表中选择自己的项目时,我才想更改为白色(fff)颜色。 The default option I want to be dark.
我想要的默认选项是深色的。 In other words: 'Select a country' should be dark color as it is and when user selects a country from the list then I want to change font color to white.
换句话说:“选择国家/地区”应为深色,并且当用户从列表中选择国家/地区时,我想将字体颜色更改为白色。
I can think some of the solutions using JS though not sure if there's an easier way for that using the select2 plugin. 我可以想到一些使用JS的解决方案,尽管不确定是否有使用select2插件的简便方法。
Easier way I can think of is to create a placeholder instead of having a default option. 我能想到的最简单的方法是创建一个占位符,而不是使用默认选项。
From: 从:
$(document).ready(function(){
$(".select2").select2();
});
To: 至:
$(document).ready(function(){
$("#individual_taxCountry").select2({
placeholder: "Select a state*"
});
});
Then on your html, set an empty option value where the placeholder will take place. 然后在您的html上,设置一个占位符的空选项值。
Replacing this: 替换为:
<option value="" selected="selected" class="selected">Select a country*</option>
To this: 对此:
<option></option>
Then add those necessary css for the font color 然后添加那些必要的CSS作为字体颜色
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #444;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #fff;
}
Just add this css to your css code 只需将此CSS添加到您的CSS代码中
.select2-container--default .select2-selection--single .select2-selection__rendered{
color: #fff
}
https://jsfiddle.net/bhuffprL/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.