닫을 때 드롭 다운 목록의 색 변경

Question

CSS를 사용하면 드롭 다운 "선택"목록의 개별 옵션에 대한 글꼴 및 배경색을 설정할 수 있습니다. 그러나 이러한 색상은 실제 드롭 다운에만 표시됩니다. 목록이 열리지 않을 때 페이지의 상자에 표시된 색은 여전히 ​​기본값입니다.

현재 몇 가지 옵션이있는 많은 드롭 다운 상자가있는 목록이 있으며 선택 사항이 즉시 분명해질 수 있도록 각 옵션의 색상을 지정할 수 있으면 유용 할 것입니다. 라디오 버튼이나 다른 입력으로 변환하는 것은 실제로 가능하지 않습니다. (내 클라이언트는 오히려 까다 롭고입니다 - P.)

Answer 1

IE는 그 어떤 위로의 IT 권리 경우 얻을 수)는 다른 브라우저에서 작동하는

당신은 어떤 자바 스크립트가 필요합니다

<select onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> 
    <option style="background-color:yellow">Item 1</option> 
    <option style="background-color:lightyellow">Item 2</option> 
</select> 

<select 
    onchange="this.className=this.options[this.selectedIndex].className" 
    class="important"> 
    <option class="important" selected="selected">Item 1</option> 
    <option class="sorta-important">Item 2</option> 
</select> 

그리고 당신의 CSS :

.important { background-color:yellow; } 
.sorta-important { background-color:lightyellow; } 

CSS 클래스 이름도 좋네요

이렇게하면 프리젠 테이션 세부 사항을 별도로 유지하고 클래스 이름을 의미있게 유지할 수 있습니다.

Answer 2

내가 jQuery를에 그것을했다 : 좋은 작품

<select id="ddlColors" style="background-color: White;"> 
    <option style="background-color: Aqua;">1</option> 
    <option style="background-color: Blue;">2</option> 
    <option style="background-color: Fuchsia;">3</option> 
    <option style="background-color: Gray;">4</option> 
</select> 
<script> 
    $("select").change(function() { 
     $("select").css("background-color", $("select option:selected").css("background-color")); 
    }) 
    .change(); 
</script>