引導 - 如何改變選擇「佔位符」選項的文本顏色

Question

引導3.3.7

我有一個<select>元素，想用placeholder屬性。我read this isn't possible它應該只是做一個disabled選項是這樣的：

<select id="foo"> 
    <option value="" disabled selected>Select your thing</option> 
    <option value="abc">abc</option> 
    <option value="def">def</option> 
</select> 

麻煩的是，引導這給出了一個暗灰色（#555），因爲它處理它像其他（非選擇）文本文本投入。

Bootstrap中字體的佔位符顏色是淺灰色（#999）。我希望它匹配。

但是，我無法找到一種方法來定位該選項。我試過以下內容：

#foo option:disabled { color: #999; } 

並給出第一個選項，例如，

<option value="" class="placeholder-dummy" disabled selected>Select your thing</option> 

.placeholder-dummy { color: #999; } 

我可以以任何方式，它只是用這樣的ID目標的唯一方法：

#foo { color: #999; } 

但是......，讓用戶改變甚至在相同的淺灰色色彩的佔位符選項。

我想要的「佔位符」（「選擇你的事」）淺灰色（#999），但是，當用戶將其更改爲任何其他選項，對於那些採取深灰色按照其他輸入（#555）

這可能嗎？

編輯寧願純粹的CSS解決方案，但因爲這看起來不可能，所以JavaScript解決方案就沒有問題了。

真的不確定人們爲什麼低估了這一點，因爲沒有給出任何答案！也許這並不容易。

Answer 1

您可以使用[disabled]和:checked選擇器進行此操作。

此選擇查找所有options與屬性disabled：

option[disabled] { 
    color: #555; 
} 

而且這個選擇找到所有options與屬性disabled當前選擇：

option[disabled]:checked { 
    color: #999; 
} 

Answer 2

實例：

放風格你選擇標籤的css

<style> 
    select:invalid { color: gray; } 
</style> 

然後改變你的佔位符選項標記應該是這樣的：

​​

代替：

<select id="foo"> 
    <option value="" disabled selected>Select your thing</option> 
    <option value="abc">abc</option> 
    <option value="def">def</option> 
</select>