更改默認選項的顏色在選擇

我想自定義select，但我不能改變使用CSS的default選項的顏色。更改默認選項的顏色在選擇

我試圖使用.choose-flat__select option[default]和.choose-flat__select option:first-child，但它沒有幫助。

而且，我試圖使用jQuery來改變它：

$("#year-ready").find("option:first").attr("default", true).css('color', 'gray');

，但沒有成功。

是否可以使用CSS來更改顏色？

UPDATE：

我認爲描述有點不正確。我想這default選項（在我的情況「年...」）有gray的顏色，當它被選中：，但如果我選擇其他項目，他們應該有black顏色：

來源

2016-05-30 Ilya Z.

據我所知'default'不是HTML屬性。 –

據我瞭解，你想更改所選選項的顏色。如果是，那麼嘗試下面的CSS。

.choose-flat__select 
{ 
    color: yourColorCode; 
}

FIDDLE DEMO HERE

UPDATE

根據您的更新問題，您可以通過使用Javascript做到這一點。

$("#year-ready").change(function() { 
    var val = $(this).val(); 
    if(val == yourDefaultValue) 
    { 
     $(this).addClass("default"); 
    } 
    else 
    { 
     $(this).removeClass("default"); 
    } 
});

並添加風格在你的CSS

.default 
{ 
    color: gray; 
}

UPDATED FIDDLE HERE

來源

2016-05-30 12:28:10

謝謝！它適合我，但據我所知，不可能只用CSS做？ –

你可以在'select'處加上'required'。請點擊此處：http://jsfiddle.net/t3nv0nzz/ –

非常感謝！ –

您可以使用此代碼：

<select id="year-ready" name="" class="choose-flat__select"> 
    <option selected disabled>Year...</option> 
    <option>2017</option> 
    <option>2018</option> 
    <option>2019</option> 
    <option>2020</option> 
    <option>2021</option> 
</select>

如果你不想顯示的默認設置它隱藏像這樣：

<option hidden selected disabled>Year...</option>

如果你想給很多不同的顏色，你可以給你的選項一些類。

<option class="green" disabled selected>Year...</option> 
<option class="red">2017</option>

Fiddle Example here

來源

2016-05-30 12:36:59

更改默認選項的顏色在選擇

回答

相關問題