How do I style a selected option string with 2 different colors using CSS?

Question

I have a dropdown select element with car names and their available colors inside parentheses. I would like to be able to do something like this:

<select class="cars">
   <option>Rolls Royce Phantom <span class="car-color">(silver)</span></option>
   <option>Ferrari 488GTB <span class="car-color">(yellow)</span></option>
   <option>Chevrolet Camaro <span class="car-color">(black)</span></option>
</select>

where

.cars {
   color: black;
   font-weight: bold;
}
.car-color {
   color: grey;
   font-weight: normal;
}

This code above is not working, unfortunately. How do I reach a desired effect?

Possible duplicate of [How to style the option of a html "select"?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select) — julianstark999, Dec 26 '17 at 10:51

score 2 · Answer 1 · answered Dec 26 '17 at 10:58

2

You can't style option elements because it's rendered by the OS, not HTML. That is why it can't be styled via CSS.

Either you could use some plugins to reach what you are trying to do,

W3schools has a simple way to style the drop down, check it here.

answered Dec 26 '17 at 10:58

Mhd Alaa Alhaj

2,438
1
11
18

score 0 · Answer 2 · answered Dec 26 '17 at 11:00

0

You can use something like this

.carcolor{
    color: grey;
}

$('<option>').val('india').text('india').attr('class','carcolor')
.appendTo('#groupid');

answered Dec 26 '17 at 11:00

redhatvicky

1,912
9
8

Niklesh Raut · Answer 3 · 2017-12-26T11:18:13.053

Try like below css , First example is for all option and second is for specific nth child, if you have multiple styles

.cars1,.cars2 {
   color: green;
   font-weight: bold;
}
.cars1 option{
   color: red;
   font-weight: normal;
   
}
.cars2 option:nth-child(2) {
   color: red;
   font-weight: normal;
}

<select class="cars1">
   <option>Rolls Royce Phantom <span class="car-color">(silver)</span></option>
   <option>Ferrari 488GTB <span class="car-color">(yellow)</span></option>
   <option>Chevrolet Camaro <span class="car-color">(black)</span></option>
</select>
<br/><br/><br/>
<div></div>

<select class="cars2">
   <option>Rolls Royce Phantom <span class="car-color">(silver)</span></option>
   <option>Ferrari 488GTB <span class="car-color">(yellow)</span></option>
   <option>Chevrolet Camaro <span class="car-color">(black)</span></option>
</select>

How do I style a selected option string with 2 different colors using CSS?

3 Answers3