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>

score 210 · Accepted Answer · edited Oct 18 '22 at 21:38

210

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"] {
  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>

edited Oct 18 '22 at 21:38

Laaouatni Anas

4,199
2
7
26

answered Oct 11 '12 at 09:22

udidu

8,269
6
48
68

1

I took away the rgba option and seems to use black now which will do :) – ngplayground Oct 11 '12 at 09:33
7

You could use the CSS `:nth-child(1..n)` selector instead. – Samuel Liew Sep 03 '13 at 03:14
2

You probably should not use the attribute selector. You probably want to use the n-th-child or give each option a class instead. – Fred Aug 31 '15 at 14:24
20

Not working on Firefox, neither in Chromium (Linux Antergos) – Albert Lazaro de Lara Dec 21 '16 at 10:17
Try add `!imporant`. For example: `background: red!important;` – michal Aug 18 '19 at 19:52
How can I change bg-color of option while hover? – Abbos Tajimov Jun 22 '20 at 22:05
"Run code snippet" still have dark grey background, – greenridinghood Oct 04 '22 at 21:11
This doesnt work in Safari 15. Inspecting the element shows the CSS background, but the select box doesnt have the style – Danial Mar 17 '23 at 17:36
this does not work in the current version of chrome for me – Drew Gallagher Apr 17 '23 at 12:39

score 22 · Answer 2 · answered Mar 21 '13 at 21:30

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>

score 22 · Answer 3 · edited Oct 07 '20 at 19:16

22

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>

edited Oct 07 '20 at 19:16

Erick Petrucelli

14,386
8
64
84

answered Mar 20 '14 at 10:37

Jaykumar Patel

26,836
12
74
76

1

@aswzen actually in Chrome is working for me (v65) but not in Firefox Quantum (v59). – CPHPython May 17 '18 at 10:55
how does this code work for these people, not even the code snippet shows desired result for me! – Leigh Cheri Jun 29 '22 at 18:54
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 – greenridinghood Oct 04 '22 at 21:05

score 12 · Answer 4 · answered Oct 08 '13 at 21:21

enter image description here

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

score 3 · Answer 5 · answered Jul 28 '16 at 19:26

3

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

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

answered Jul 28 '16 at 19:26

Bob Brunius

1,344
5
14
21

The use of !important should be avoided if at all possible. – Gertsen May 23 '22 at 12:12

score 2 · Answer 6 · answered Oct 11 '12 at 20:53

2

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)

answered Oct 11 '12 at 20:53

Travis

124
1
9

score 2 · Answer 7 · edited May 23 '17 at 11:33

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.

score 2 · Answer 8 · answered Dec 05 '17 at 19:15

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!

score 0 · Answer 9 · edited Aug 02 '17 at 09:18

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

Change select box option background color

9 Answers9

Linked

Related