用戶使用select2更改所選項目的字體顏色

Question

我有簡單的選擇選項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>

我為此使用select2：

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

我還使用此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;
}

它看起來像我想要的樣子，但是當用戶這樣做時，我想將所選項目的字體的顏色更改為白色。 我該怎么做？

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

小提琴

Answer 2

只需將此CSS添加到您的CSS代碼中

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


https://jsfiddle.net/bhuffprL/