更改选择框选项的背景色

小编典典

更改选择框选项的背景色

html

我有一个select框，当select单击框并显示所有选项时，我正在尝试更改选项的背景色。

HTML：

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

CSS：

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

阅读 511

2020-05-10

共1个答案

小编典典

你需要把background-color对option标签，而不是select标签…

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

如果要为每个option标签设置样式，请使用css attribute选择器：

select option {

  margin: 40px;

  background: rgba(0, 0, 0, 0.3);

  color: #fff;

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);

}



select option[value="1"] {

  background: rgba(100, 100, 100, 0.3);

}



select option[value="2"] {

  background: rgba(150, 150, 150, 0.3);

}



select option[value="3"] {

  background: rgba(200, 200, 200, 0.3);

}



select option[value="4"] {

  background: rgba(250, 250, 250, 0.3);

}


<select>

  <option value="">Please choose</option>

  <option value="1">Option 1</option>

  <option value="2">Option 2</option>

  <option value="3">Option 3</option>

  <option value="4">Option 4</option>

</select>

2020-05-10