基于选择值的CSS背景颜色

Question

Hopefully a simple question here. I have the following html code:

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

What I'd like is the textarea's background color to dynamically change based on the dropdown's selection. Is there a simple way to reference the dropdown's value using CSS, or would JavaScript be the better route? HTML5 and CSS3 are definitely fair game here. Thanks!

Answer 1

here: DEMO

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


<textarea>Sample Text</textarea>​

jquery much easier

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

Answer 2

You cannot do this just with HTML and CSS. Some JavaScript is needed. Example:

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