html select 입력에서 선택한 옵션의 색상을 변경하십시오.

Question

Select 메뉴에서 SELECTED 옵션의 텍스트 색상을 변경하려고하는데 작동하지 않는 것 같습니다. 아래는 제 코드입니다. 어떤 아이디어? 값이있는 옵션이 선택되면 색상 만 변경하고 싶습니다. 즉 첫 번째 옵션이 아닌 다른 옵션을 선택하면됩니다.

http://jsfiddle.net/wtedm8q9/

HTML :

는

<div class="row1-3home"> 
    <select name="phone1" id="phone1"> 
     <option value="">-- Select Phone Type --</option> 
     <option value="Mobile">Mobile</option> 
     <option value="Office">Office</option> 
     <option value="Home">Home</option> 
    </select> 

    <select name="phone2" id="phone2"> 
     <option value="">-- Select Phone Type --</option> 
     <option value="Mobile">Mobile</option> 
     <option value="Office">Office</option> 
     <option value="Home">Home</option> 
    </select> 


</div> 

CSS :

jQuery를의 비트와 함께

.row1-3 select, .row1-3home select { 
background:#FFF; 
font-size:12px; 
font-family:'Open Sans', sans-serif; 
width:94%; 
margin-left:3%; 
margin-right:3%; 
height:40px; 
line-height:40px; 
border:none; 
padding-left:10px; 
border-radius:none; 
margin-bottom:5px; 
-moz-appearance: none; 
} 
.row1-3 select option, .row1-3home select option { 
color:#01afd2; 
} 
.row1-3 select option:not(:checked), .row1-3home select option:not(:checked) { 
color:#9fa7b4; 
} 

Answer 1

, 당신은 누군가가 메뉴 항목을 변경하면이 색상을 변경할 수 있습니다.

Updated fiddle

jQuery를

$("select").change(function() { 
    $(this).css('color','red') 
}) 

Answer 2

첫 번째 옵션에서 속성 value=""을 제거 후

Updated Fiddle

<select name="phone1" id="phone1"> 
     <option>-- Select Phone Type --</option> 
     <option value="Mobile">Mobile</option> 

과 CSS 규칙에 속성 선택기를 추가

.row1-3 select option[value]:checked, .row1-3home select option[value]:checked { 
    color:#01afd2; 
} 

PS를 : 당신의 선택을 변경하는 자유를했다. :not(:checked) 대신 일반적인 스타일을 사용하고 체크 한 색상 만 변경하십시오 ...

Answer 3

이 것을 확인하십시오. 수행하려는 작업을 정확하게 수행하려면 jQuery를 사용해야합니다. jsFiddle.

jQuery를 : 첫 번째 옵션을 선택한 경우이 jQuery로

jQuery('#phone1').change(function() { 
    if (jQuery(this).children('option:first-child').is(':selected')) { 
     jQuery("#phone1").css("color", "black"); 
     jQuery("#phone1 option:checked").css("color", "black"); 
     jQuery("#phone1 option:not(:checked)").css("color", "black"); 
    } else { 
     jQuery("#phone1").css("color", "#01afd2"); 
     jQuery("#phone1 option:checked").css("color", "#01afd2"); 
     jQuery("#phone1 option:not(:checked)").css("color", "black"); 
    } 
}); 

jQuery('#phone2').change(function() { 
    if (jQuery(this).children('option:first-child').is(':selected')) { 
     jQuery("#phone2").css("color", "black"); 
     jQuery("#phone2 option:checked").css("color", "black"); 
     jQuery("#phone2 option:not(:checked)").css("color", "black"); 
    } else { 
     jQuery("#phone2").css("color", "#01afd2"); 
     jQuery("#phone2 option:checked").css("color", "#01afd2"); 
     jQuery("#phone2 option:not(:checked)").css("color", "black"); 
    } 
}); 

는, 즉 -- Select Phone Type --은 색상이 black 남아 있지만 다른 옵션 중 하나, #01afd2에 자신의 색상 변경을 선택합니다.