基于选择值的CSS背景颜色

时间:2012-11-23 06:12:56

标签: html css

希望这里有一个简单的问题。我有以下HTML代码:

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

我想要的是textarea的背景颜色,根据下拉列表的选择进行动态更改。是否有一种使用CSS引用下拉列表值的简单方法,或者JavaScript是更好的路径? HTML5和CSS3绝对是公平的游戏。谢谢!

2 个答案:

答案 0 :(得分:3)

此处: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());
    });​

答案 1 :(得分:0)

你不能只用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>