更改选择框选项背景颜色

你需要把 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>

另一种选择是使用 Javascript:

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

(不像 CSS 属性选择器那样干净，但是更强大)

我不知道您是否考虑过这个问题，但是如果您的应用程序是基于对不同的项目分组着色的，那么您可能应该使用 <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>

类似的一些答案，但没有真正说明，是添加一个类到实际的选项标记和使用 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;
}

是的，你可以用相反的方式设置:

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>

我的选择不会颜色的背景，直到我添加! 重要的样式。

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

如果你真的想在 a 中设计样式，可以考虑切换到基于 Javascript/CSS 的下拉菜单，比如 http://getbootstrap.com/2.3.2/components.html#dropdowns或者 https://silviomoreto.github.io/bootstrap-select/examples/。这是因为像 IE 不允许元素内选项的样式化这样的浏览器。Chrome/OSX 也有这个问题——你不能设置样式选项。

但是，该方法会附加一个警告。这些类型的菜单在移动平台上的工作方式非常不同，因为没有使用本机元素。它们在桌面上也有令人讨厌的怪癖。我的建议是: 1)不要自己编写; 2)找一个经过很好测试的库。

$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:)

这就是我所学到的关于这门学科的知识！

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

请点击这里阅读: 《粉碎》杂志