Wie style ich eine ausgewählte Optionszeichenfolge mit 2 verschiedenen Farben mithilfe von CSS?

Question

Ich habe ein Dropdown-Element mit Auto Namen und ihre verfügbaren Farben in Klammern. Ich möchte in der Lage sein, so etwas zu tun:

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

wo

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

Dieser Code oben nicht funktioniert, leider. Wie erreiche ich einen gewünschten Effekt?

Answer 1

Sie können nicht option Elemente Stil, weil es durch die OS gemacht hat, nicht HTML. Deshalb kann es nicht über CSS gestylt werden.

Entweder kann man einige Plugins verwenden, um zu erreichen, was Sie zu tun versuchen,

W3schools hat eine einfache Art und Weisen Sie den Tropfen stylen, check it here.

Answer 2

Sie so etwas wie dieses

.carcolor{ 
    color: grey; 
} 

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

Answer 3

Versuchen Sie, wie unten CSS verwenden können, Erstes Beispiel ist für alle Options und zweite ist für bestimmte n-te Kind, wenn Sie mehrere Arten

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

haben