更改选择框选项背景颜色

Question

我有一个选择框，我试图在单击选择框并显示所有选项时更改选项的背景颜色。

 body {
  background: url(http://subtlepatterns.com/patterns/black_linen_v2.png) repeat;
}

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

 <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>

原文由 ngplayground 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>

原文由 udidu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我不知道您是否考虑过，但如果您的应用程序基于为各种项目分组着色，您可能应该使用 <optgroup> 标签和一个类以供进一步参考。例如：

 <select>
    <optgroup label="Numbers" class="green">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </optgroup>

    <optgroup label="Letters" class="blue">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </optgroup>
</select>

然后在文档的头部写这样的 css：

 <style type="text/css">
    .green option{
        background-color:#0F0;
    }

    .blue option{
        background-color:#00F;
    }
</style>

原文由 rfoo 发布，翻译遵循 CC BY-SA 3.0 许可协议