首頁 > web前端 > css教學 > 如何更改CSS中選擇框選項的背景顏色?

如何更改CSS中選擇框選項的背景顏色?

DDD
發布: 2024-12-18 11:54:11
原創
651 人瀏覽過

How to Change the Background Color of Select Box Options in CSS?

如何更改選擇框選項背景顏色

自訂

設定選項元素的樣式

更改選項元素的背景顏色選項,將背景顏色屬性套用於選項元素而不是選擇元素:

select option {
  margin: 40px;
  background-color: #000;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
登入後複製

自訂單一選項

要為特定選項設定唯一的樣式,請使用CSS 中的屬性選擇器。例如,以下程式碼根據每個選項的值屬性為其指派不同的背景顏色:

select option[value="1"] {
  background-color: #646464;
}

select option[value="2"] {
  background-color: #969696;
}

select option[value="3"] {
  background-color: #C8C8C8;
}

select option[value="4"] {
  background-color: #FAFAFA;
}
登入後複製

以上是如何更改CSS中選擇框選項的背景顏色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板