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>

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

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>