如何將選定的選項顏色與禁用選項分開設計

Question

我有禁用第一個選項的HTML下拉選擇菜單。我想以灰色顯示默認禁用選項，但是一旦我選擇了另一個值，我希望它顯示爲藍色。我怎樣才能做到這一點？

我設法讓所選擇的選項顯示爲灰色，並且可選選項出現在列表中藍色。但是，一旦他們選擇禁用，不禁用選項無論如何都將顯示爲灰色：

select:not(:checked) { 
    color: gray; 
} 
select option:not(:disabled){ 
    color: #000098; 
} 

Answer 1

可以使用attribute selector

select[disabled]{ 
    color: #f00; 
} 

Answer 2

這裏嘗試這種風格select option:first-child將選擇禁用您的第一選擇。

select option { color: blue; } 
    select option:first-child{ 
     color: gray; 
    } 

Answer 3

如果您將所需標記放在選擇元素中，則可以這樣做。

HTML：

<select name="number" required> 
    <option value="" disabled selected hidden>Placeholder</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 

CSS：

select:required:invalid { 
    color: gray; 
} 
select, option { 
    color: blue; 
} 

https://jsfiddle.net/p63eg7d8/