更改选择框选项背景颜色

Question

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

See Fiddle

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

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代码设置样式..请使用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>

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

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

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

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

如果您真的想要在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）找一个经过良好测试的图书馆。

Answer 6

$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：）

Answer 7

只需更改bg颜色

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

Answer 8

另一种选择是使用Javascript：

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

（不像CSS属性选择器那样干净，但功能更强大）

Answer 9

我的选择不会为背景着色，直到我添加！重要的风格。

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

Answer 10

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

CSS 2规范没有解决如何向用户提供表单元素的问题！

请在此处阅读： smashing magazine

最终，您永远不会找到w3c或其他针对此主题的任何技术文章。没有完全支持特定选择框中的样式表单元素，但是，您可以通过一些努力来开车......

Styling HTML Form Elements

Building Custom Widgets

不要浪费时间与黑客一起阅读链接并了解专业人士如何完成工作！