붉은 색을 선택한 선택된 옵션

Question

그래서 여러 개의 옵션 요소가있는 선택 요소가 있습니다. 하나를 제외한 모든 옵션 요소가 있습니다

color: black; 

하나의 옵션이 있습니다

<select name="foo"> 
    <option value="1" class="textBlack">1</option> 
    <option value="2" class="textBlack">2</option> 
    <option value="3" class="textRed">3</option> 
    <option value="4" class="textBlack">4</option> 
</select> 

이 문제는 내가 빨간색 후 머물 빨간색 텍스트 옵션을 원할 것입니다 : 예를 들어

color: red; 

선택됨. DOM에서 HTML은 다음과 같습니다 그래서 (즉, 내가 선택 요소를 클릭하고 빨간색 옵션을 선택) :

<select name="foo"> 
    <option value="1" class="textBlack">1</option> 
    <option value="2" class="textBlack">2</option> 
    <option value="3" class="textRed" selected="selected">3</option> 
    <option value="4" class="textBlack">4</option> 
</select> 

나뿐만 아니라 빨간색으로 선택 요소의 텍스트를하고 싶습니다. 그러나 텍스트는 검은 색입니다.

Answer 1

순수 CSS로 생각할 수 없습니다. select {color:red}을 사용할 수 있지만 option은 모두 빨간색으로 표시됩니다. 당신은 자바 스크립트가 필요합니다 아마 필요 달성하기 위해, jQuery 코드의 예는 다음과 같습니다 :

$("select").change(function(){ 
    var current = $("select option:selected").attr("value"); 
    if (current == 3) {$("select").css('color','red');} else {$("select").css('color','black');} 
}); 
$("select").click(function() { 
    $("select option").css('color','black'); 
}); 

데모 :http://jsfiddle.net/xrPKN/2/

Answer 2

.textRed{color:red} 

메신저가 빠져 있지 않는 한 매우 간단합니다.

Answer 3

자바 스크립트를 통해 선택 색상을 변경해야합니다. 뭔가 같은 것

$("select").change(function(){ 
    $(this).css("color", $(this).children("option:selected").css("color")); 
});