Change select box option background color

Question

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.

body {
  background: url(http://subtlepatterns.com/patterns/black_linen_v2.png) repeat;
}

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

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

Everyway

Answer 1

You need to apply the background-color to the option elements and not the select element:

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 elements, use the CSS attribute selector. You can also use different class attributes for each <option>, if desired.

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>

Pneumonoultramicroscopicsilicovolcanoconiosis

I took away the rgba option and seems to use black now which will do :) – Everyway

You could use the CSS :nth-child(1..n) selector instead. – Nomothetic

You probably should not use the attribute selector. You probably want to use the n-th-child or give each option a class instead. – Peary

How can I change bg-color of option while hover? – Witcher

"Run code snippet" still have dark grey background, – Bellyband

This doesnt work in Safari 15. Inspecting the element shows the CSS background, but the select box doesnt have the style – Knowledge

this does not work in the current version of chrome for me – Jerold

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

.green option {
  background-color: #0F0;
}

.blue option {
  background-color: #00F;
}

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

Honesty

Does nothing in Chrome on OSX – Baldheaded

Answer 3

Yes, you can set this by the opposite way:

select { /* desired background */ }
option:not(:checked) { background: #fff; }

Check it working bellow:

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>

Marceau

@aswzen actually in Chrome is working for me (v65) but not in Firefox Quantum (v59). – Smatter

how does this code work for these people, not even the code snippet shows desired result for me! – Subscript

yes, even "Run code snipped" shows default gray background, very general dark grey background. i can not share screenshot or snippet here, i wanted to share what i am seeing – Bellyband

Does not answer the question--OP wants to change the background-color of the options when the menu is expanded, not the background-color of the default/currently-selected option when the menu is closed. – Swann

Answer 4

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)

Whitneywhitson

Answer 5

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

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

Leoni

The use of !important should be avoided if at all possible. – Paralysis

!important is also completely irrelevant unless you have other styles, which is not a concern for this question. As such this repeats numerous answers, including the top one from 2012. – Swann

Answer 6

If you really want to style the <options> within a <select>, 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 <select> 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.

Hereupon

Answer 7

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

Laruelarum