Html 更改选择框选项背景颜色

Change select box option background color

提问by ngplayground

I have a selectbox and I'm trying to change the background color of the options when the selectbox has been clicked and shows all the options.

我有一个select框，当select单击该框并显示所有选项时，我试图更改选项的背景颜色。

See Fiddle

见小提琴

HTML:

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:

CSS：

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

回答by udidu

You need to put background-coloron the optiontag and not the selecttag...

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

If you want to style each one of the optiontags.. use the css attributeselector:

如果要为每个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>

回答by rfoo

I don't know if you've considered it or not but if your application is based on coloring various groupings of items you should probably use the <optgroup>tag coupled with a class for further referencing. For example:

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

and then in the head of your document write the css like this:

然后在你的文档的头部写下这样的 css：

<style type="text/css">
    .green option{
        background-color:#0F0;
    }

    .blue option{
        background-color:#00F;
    }
</style>

回答by Jay Patel

Yes you can set this by oppisite way using this,

是的，您可以使用它通过相反的方式设置它，

option:not(:checked) { }

check this demo jsFiddle

检查这个 demo jsFiddle

HTML

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

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

回答by dah97765

Similar to some of the answers, but not really stated, is to add a class to the actual option tag and use css classes...this is currently working for me without issue on IE (see above ss).

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

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

CSS:

CSS：

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

回答by Bob Brunius

My selects would not color the background until I added !important to the style.

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

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

回答by Charlie Dalsass

If you really want to style the within a , consider switching to a Javascript/CSS based drop down such as http://getbootstrap.com/2.3.2/components.html#dropdownsor https://silviomoreto.github.io/bootstrap-select/examples/. This because browsers such as IE do not allow styling of options within elements. Chrome/OSX also has this problem - you cannot style options.

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

However a warning is attached to that approach. These types of menus work very differently on mobile platforms because native elements aren't used. They can have annoying quirks on desktop as well. My advice is 1) don't write your own and 2) find a library that's been really well tested.

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

回答by obinoob

Here it goes what I've learned about the subject!

在这里，我学到了关于这个主题的知识！

The CSS 2 specification did not address the problem of how form elements should be presented to users period!

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

Read here:smashing magazine

在这里阅读：粉碎杂志

Eventually, you will never find any technical article from w3c or other addressed to this topic. Styling form elements in particular select boxes is not fully supported however, you can drive around... with some effort!

最终，您将永远找不到 w3c 或其他针对此主题的任何技术文章。不完全支持样式表单元素，特别是选择框，但是，您可以四处走动……稍加努力！

Styling HTML Form Elements

样式化 HTML 表单元素

Building Custom Widgets

构建自定义小部件

Don't waste time with hacks e such read the links and learn how pros get the job done!

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

回答by Thomas Mathew

Simply change bg color

只需更改背景颜色

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

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

回答by Chintan

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

add $htmlIngressCssin your html portion :)

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

回答by Travis

Another option is to use Javascript:

另一种选择是使用 Javascript：

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

(Not as clean as the CSS attribute selector, but more powerful)

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