更改选择框选项的背景色


129

我有一个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);
}

Answers:


163

你需要把background-coloroption标签,而不是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选项,现在似乎使用了黑色:)
ngplayground 2012年

5
您可以改用CSS :nth-child(1..n)选择器。
塞缪尔刘氏

2
您可能不应该使用属性选择器。您可能想使用第n个孩子,或者给每个选项一个类。
2015年

3
无法在Firefox上运行,也不能在Chromium(Linux Antergos)中运行
albert

尝试添加!imporant。例如:background: red!important;
michal

19

我不知道您是否考虑过,但是如果您的应用程序是基于对各种项目分组进行着色的,则可能应该使用<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>

16

是的,您可以使用相反的方式对此进行设置,

option:not(:checked) { }

检查一下 demo jsFiddle

的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);
}
option:not(:checked) { 
    background-color: white; 
    color:#000;
}

Chrome中的@aswzen实际上适用于我(v65),但不适用于Firefox Quantum(v59)。
CPHPython

7

在此处输入图片说明

与某些答案类似,但未真正说明,是在实际的选项标签中添加一个类并使用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;
}


2

如果您确实想在中设置样式,请考虑切换到基于Javascript / CSS的下拉菜单,例如http://getbootstrap.com/2.3.2/components.html#dropdownshttps://silviomoreto.github.io/ bootstrap-select / examples /。这是因为IE之类的浏览器不允许在元素内设置选项的样式。Chrome / OSX也存在此问题-您无法设置样式。

但是,对该方法附加了警告。这些类型的菜单在移动平台上的工作方式非常不同,因为未使用本机元素。他们也可以在台式机上遇到烦人的怪癖。我的建议是1)不要编写自己的库; 2)找到经过充分测试的库。


1

这就是我所学到的有关该主题的知识!

CSS 2规范没有解决如何向用户展示表单元素的问题!

在这里阅读: 粉碎杂志

最终,您将永远找不到w3c或该主题的其他技术文章。样式元素,尤其是选择框的样式不完全受支持,但是,您可以花些力气!

样式化HTML表单元素

构建自定义小部件

不要浪费时间使用黑客,例如阅读链接并了解专家如何完成工作!



0

另一种选择是使用Javascript:

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

(不像CSS属性选择器那么干净,但是功能更强大)


0
$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部分中添加:)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.