如何使用 CSS 變更選擇方塊選項的背景顏色？

如何變更選取框選項的背景顏色

當點選選取框時，它會顯示選項清單。預設情況下，這些選項的背景顏色與選擇框本身的背景顏色相同。但是，您可以使用 CSS 來變更選項的背景顏色。

為此，您需要將 background-color 屬性套用到選項元素，而不是選擇元素。例如，以下 CSS 程式碼會將選擇框中所有選項的背景顏色變更為黑色：

select option {
  background-color: black;
}

如果要單獨設定每個選項的樣式，可以使用 CSS 屬性選擇器。例如，以下CSS代碼將選擇框中第一個選項的背景顏色變更為紅色，第二個選項變更為綠色，第三個選項變更為藍色：

select option:first-child {
  background-color: red;
}

select option:nth-child(2) {
  background-color: green;
}

select option:nth-child(3) {
  background-color: blue;
}

您也可以使用不同的每個 的類別屬性元素（如果需要）。例如，以下 CSS 程式碼會將選取框中所有選項類別為 option-1 的選項的背景顏色變更為紅色，並將所有選項類別為 option-2 的背景顏色變更為綠色：

.option-1 {
  background-color: red;
}

.option-2 {
  background-color: green;
}

以上是如何使用 CSS 變更選擇方塊選項的背景顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！