How to change select box option background color?

问题:

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

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

回答1:

You need to put background-color on the option tag and not the select tag...

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 option tags.. use the css attribute selector:

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\"] {
  /* value not val */
  background: rgba(100, 100, 100, 0.3);
}

select option[value=\"2\"] {
  /* value not val */
  background: rgba(200, 200, 200, 0.3);
}

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

回答2:

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:

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

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

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

回答3:

Yes you can set this by oppisite way using this,

option:not(:checked) { }

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

回答4:

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).

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

回答5:

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#dropdowns or 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.

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.

回答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>\';

add $htmlIngressCss in your html portion :)

回答7:

Simply change bg color

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

回答8:

Another option is to use Javascript:

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

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

回答9:

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

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

回答10:

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!

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!

Styling HTML Form Elements

Building Custom Widgets

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