用户使用select2更改所选项目的字体颜色

Question

我简单选择选项html：

script.php?site=site.html

我正在使用select2：

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

我还使用此css自定义了选择的方式：

$(document).ready(function(){
$(".select2").select2();
});

它看起来像我想要的方式，但是当用户这样做时，我想将所选项目的字体颜色更改为白色。我怎么能做到这一点？

http://jsfiddle.net/bhuffprL/

编辑：因为不是每个人似乎都明白我的目标 - 我只想在用户从列表中选择他/她自己的项目时更改为白色（fff）颜色。默认选项我想变暗。换句话说：“选择国家/地区”应该是深色，当用户从列表中选择国家/地区时，我想将字体颜色更改为白色。

Answer 1

我可以想到使用JS的一些解决方案虽然不确定使用select2插件是否有更简单的方法。

我能想到的更简单的方法是创建占位符而不是默认选项。

发件人：

$(document).ready(function(){
  $(".select2").select2();
});

要

$(document).ready(function(){
  $("#individual_taxCountry").select2({
    placeholder: "Select a state*"
  });
});

然后在你的html上，设置一个空的选项值来占位符。

取代它：

<option value="" selected="selected" class="selected">Select a country*</option>

对此：

<option></option> 

然后为字体颜色添加必要的css

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #444;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
}

Fiddle

Answer 2

只需将此css添加到您的css代码

即可

.select2-container--default .select2-selection--single .select2-selection__rendered{
    color: #fff
}


https://jsfiddle.net/bhuffprL/