如何在 <select> 元素中设置 <option> 的背景颜色？答案

【问题标题】：How can I set the background color of <option> in a <select> element?如何在 <select> 元素中设置 <option> 的背景颜色？
【发布时间】：2016-04-09 23:42:29
【问题描述】：

如何设置 HTML 列表中项目的背景颜色？

【问题讨论】：

标签： html select background-color

【解决方案1】：

select.list1 option.option2
{
    background-color: #007700;
}

<select class="list1">
  <option value="1">Option 1</option>
  <option value="2" class="option2">Option 2</option>
</select>

【讨论】：

为什么要使用>？ <option> 元素只能存在于 select 中
你能在
此解决方案在 Chrome 和 Safari 中仍然不起作用。
我需要以编程方式添加 bg 颜色，所以我不能真正使用类。像这样：`try { opt_css.backgroundColor = item.color; // 这可能没有定义 $opt.prop('disabled', item.disabled); // 这也是 } catch(e) { // 什么也不做 } ` 结果，我可以看到

【解决方案2】：

我假设您的意思是 <select> 输入元素？

对此的支持是相当新的，但 FF 3.6、Chrome 和 IE 8 可以正常呈现：

<select name="select">
  <option value="1" style="background-color: blue">Test</option>
  <option value="2" style="background-color: green">Test</option>
</select>

【讨论】：

【解决方案3】：

我也有这个问题。我发现将外观设置为无帮助。

.class {
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;

    background-color: red;
}

【讨论】：

【解决方案4】：

和平常一样background-color: #f0f

您只需要一种方法来定位它，例如：<option id="myPinkOption">blah</option>

【讨论】：