CSS를 사용하여 선택한 옵션 문자열을 2 가지 색상으로 스타일을 지정하려면 어떻게해야합니까?

Question

괄호 안에 차 이름과 사용 가능한 색상이있는 드롭 다운 선택 요소가 있습니다. 나는 이런 식으로 뭔가를 할 수 있도록하고 싶습니다 : 위의이 코드가 작동하지 않는 경우

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

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

, 불행히도. 원하는 효과를 얻으려면 어떻게해야합니까? 그것이 OS하지 HTML에 의해 렌더링 있기 때문에

Answer 1

당신은 option 요소의 스타일을 할 수 없다. 그래서 CSS을 통해 스타일을 지정할 수 없습니다.

당신은

W3 스쿨, 아래 check it here을 드롭 스타일을하는 간단한 방법이있다, 당신이 뭘 하려는지에 도달하는 몇 가지 플러그인을 사용할 수 있습니다 어느.

Answer 2

당신은 CSS를 아래와 같이보십시오이

.carcolor{ 
    color: grey; 
} 

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

Answer 3

같은 것을 사용할 수 있으며, 첫 번째 예는 모든 옵션과 여러 스타일

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

이있는 경우 두 번째는, 특정 n 번째의 아이입니다