更改选择框选项背景颜色答案

【问题标题】：Change select box option background color更改选择框选项背景颜色
【发布时间】：2012-10-01 22:06:06
【问题描述】：

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

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>

【问题讨论】：

标签： html css html-select background-color

【解决方案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>

【讨论】：

我去掉了 rgba 选项，现在似乎可以使用黑色了 :)
您可以改用 CSS :nth-child(1..n) 选择器。
您可能不应该使用属性选择器。您可能想使用第 n 个孩子或给每个选项一个类。
不能在 Firefox 上运行，也不能在 Chromium (Linux Antergos) 上运行
尝试添加!imporant。例如：background: red!important;

【解决方案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>

【讨论】：

【解决方案3】：

是的，您可以通过相反的方式设置：

select { /* desired background */ }
option:not(:checked) { background: #fff; }

检查它是否正常工作：

select {
  margin: 50px;
  width: 300px;
  background: #ff0;
  color: #000;
}

option:not(:checked) {
  background-color: #fff;
}

<select>
  <option val="">Select Option</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>

【讨论】：

@aswzen 实际上在 Chrome 中对我有用 (v65) 但在 Firefox Quantum (v59) 中无效。

【解决方案4】：

与一些答案类似，但没有真正说明，是在实际选项标签中添加一个类并使用 css 类...这目前对我有用，在 IE 上没有问题（参见上面的 ss）。

<select id="reviewAction">
<option class="greenColor">Accept and Advance Status</option>
<option class="redColor">Return for Modifications</option>
</select>

CSS：

.greenColor{
    background-color: #33CC33;
}
.redColor{
    background-color: #E60000;
}

【讨论】：

【解决方案5】：

另一种选择是使用 Javascript：

if (document.getElementById('selectID').value == '1') {
       document.getElementById('optionID').style.color = '#000';

（不如 CSS 属性选择器干净，但更强大）

【讨论】：

【解决方案6】：

在我将 !important 添加到样式之前，我的选择不会为背景着色。

    input, select, select option{background-color:#FFE !important}

【讨论】：

【解决方案7】：

如果您真的想在 a 内设置样式，请考虑切换到基于 Javascript/CSS 的下拉菜单，例如 http://getbootstrap.com/2.3.2/components.html#dropdowns 或 https://silviomoreto.github.io/bootstrap-select/examples/。这是因为 IE do not allow styling of options within elements 等浏览器。 Chrome/OSX 也有这个问题——你不能设置选项的样式。

但是，该方法附有警告。这些类型的菜单在移动平台上的工作方式非常不同，因为不使用原生元素。他们在桌面上也可能有烦人的怪癖。我的建议是 1) 不要自己编写和 2) 找到一个经过很好测试的库。

【讨论】：

【解决方案8】：

这就是我对这个主题的了解！

CSS 2 规范没有解决表单元素应该如何呈现给用户的问题！

阅读这里：smashing magazine

最终，您将永远找不到来自 w3c 或其他有关该主题的任何技术文章。不完全支持在特定的选择框中设置表单元素的样式，但是，您可以四处转转……稍加努力！

Styling HTML Form Elements

Building Custom Widgets

不要将时间浪费在 hack 上，例如阅读链接并了解专业人士如何完成工作！

【讨论】：

【解决方案9】：

$htmlIngressCss='<style>';
$multiOptions = array("" => "All");
$resIn = $this->commonDB->getIngressTrunk();
while ($row = $resIn->fetch()) {
    if($row['IsActive']==0){
        $htmlIngressCss .= '.ingressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}';
    }
    $multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName'];
}
$htmlIngressCss.='</style>';

在您的 html 部分添加 $htmlIngressCss :)

【讨论】：

【解决方案10】：

只需更改背景颜色

select { background: #6ac17a; color:#fff; }

【讨论】：