CSS 배경색은 선택 값을 기준으로합니다.

Question

잘하면 여기에 간단한 질문이 있습니다.

<select id="dropdown"> 
    <option value="#00FFFF">Cyan</option> 
    <option value="#FF00FF">Magenta</option> 
</select> 
<textarea style="background-color:[dropdown's selected value]">Sample Text</textarea> 

내가 원하는 것은 동적 드롭 다운의 선택에 따라 변경할 수있는 텍스트 영역의 배경색 : 나는 다음과 같은 HTML 코드가 있습니다. CSS를 사용하여 드롭 다운 값을 참조하는 간단한 방법이 있습니까? 아니면 JavaScript가 더 나은 경로입니까? HTML5와 CSS3는 확실히 공정한 게임입니다. 감사! 여기

Answer 1

: DEMO

<select id="dropdown"> 
    <option value="#00FFFF">Cyan</option> 
    <option value="#FF00FF">Magenta</option> 
</select> 


<textarea>Sample Text</textarea>​ 

JQuery와 훨씬 더 쉽게는

$('#dropdown').change(function(){ 
     $('textarea ').css('background-color', $(this).val()); 
    });​ 

Answer 2

당신은 HTML과 CSS와 함께이 작업을 수행 할 수 없습니다. 일부 JavaScript가 필요합니다. 예 :

<select id="dropdown" onchange="setBg(this)"> 
    <option selected value="#FFFFFF">White</option> 
    <option value="#00FFFF">Cyan</option> 
    <option value="#FF00FF">Magenta</option> 
</select> 
<textarea id="ta">Sample Text</textarea> 
<script> 
function setBg(sel) { 
    document.getElementById('ta').style.background = 
    sel.options[sel.selectedIndex].value; 
} 
</script>