html - 更改选择框选项背景颜色

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>

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标签的样式.. 使用 cssattribute选择器：

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>

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>

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

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

Answer 5

另一种选择是使用 Javascript：

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

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

Answer 6

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

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

Answer 7

如果您真的想在 a 中设置样式，请考虑切换到基于 Javascript/CSS 的下拉菜单，例如http://getbootstrap.com/2.3.2/components.html#dropdowns或https://silviomoreto.github.io/引导选择/示例/。这是因为 IE 等浏览器不允许在元素中设置选项样式。Chrome/OSX 也有这个问题——你不能设置选项的样式。

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

Answer 8

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

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

在这里阅读： 粉碎杂志

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

样式化 HTML 表单元素

构建自定义小部件

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

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

添加$htmlIngressCss你的html部分:)

Answer 10

只需更改 bg 颜色

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