Change Select Box Option Background Color

Answer :

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>

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> 

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>