假設我有這樣的標記:

<select>
    <option value="">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>    
</select>

現在，我希望只有當值為空時，即當它顯示“選擇”時，下拉菜單才顯示為灰色。當用戶選擇其中一個選項時，它應該是黑色/默認顏色。

(這是為了在視覺上與我的頁面上有灰色占位符的文本框保持一致)。

我想完成這樣的事情:

select[value=""] {
    color: gray;
}

但事實證明，select標記并沒有真正的value屬性。

除了使用JavaScript之外，還有其他方法嗎？

樣式選項，將僅按照下拉列表中顯示的樣式對它們進行樣式化，而不是當選擇不在焦點上時。我希望空白選項顯示時選擇是斜體，可以這樣實現(注意空白選項必須有值= & quot"設置):

/* If the select does not have a valid value, ie the blank option is selected, we make it italic */
select:invalid {
    font-style: italic;
}

/* Now the child options inherit the italics style, so we reset that*/
select > option {
    font-style: normal;
}

/* Apply italics to the invalid options too when shown in the dropdown */
select option[value=""], select option:not([value]) {
    font-style: italic;
}

<select required>
  <option value="">-- Please Select --</option>
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

如果你的空選項總是在第一個位置，你可以使用偽類:first-child，n-child(1)，n-of-type(1)。據我所知，空值和文本的選項& quot選擇& quot默認情況下，應該是第一個。在這種情況下，我們會意識到。

甜蜜而簡單，只需在下面添加CSS就可以解決你的問題。希望能幫到你。

select option[value=""] {
  color: red;
}

在谷歌瀏覽器上驗證:版本92.0.4515.107(官方版本) (64位) 在Firefow上驗證:版本90.0.2 (64位)

select option[value=""] {
  color: red;
}

<select>
    <option value="">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>    
</select>

<select>
    <option value="">Select</option>
    <option value="1">One</option>
    <option value="">Two</option>  
    <option value="3">Three</option>  
    <option value="">Four</option>  
</select>

您可以使用new :has偽類。

這是一個只有CSS的解決方案，全球支持度為87.43%(2023年6月火狐仍然不支持:has偽類)。

如果選擇的選項有一個空值，下面代碼片段中的代碼會將選擇項涂成灰色& lt選項值= & quot"& gt選擇& lt/option & gt；或者& lt選項值& gt選擇& lt/option & gt；如果所選選項的值不為空，它會將選擇的選項涂成黑色。

在任何情況下，選項將始終是黑色的。

如果您希望選項遵循選擇顏色，只需將選項的默認顏色設置為與選擇顏色相同:

select {
  color: grey;
}

select option {
  color: grey;
}

select {
  color: grey;
}

select option {
  color: black;
}

select:has(option:checked:not([value])),
select:has(option:checked:not([value=""])) {
  color: black;
}

select:has(option:checked:not([value])) option,
select:has(option:checked:not([value=""])) option {
  color: black;
}

<select>
    <option value="">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>    
</select>