CSS背景颜色基于选择值 [英] CSS background color based on select value

问题描述

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

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>

我想要的是textarea的背景颜色，根据下拉菜单的选择动态更改。有一个简单的方法来引用下拉的值使用CSS，或者JavaScript是更好的路线？ HTML5和CSS3绝对是公平的游戏在这里。谢谢！

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!

推荐答案

这里： 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());
    });​

这篇关于CSS背景颜色基于选择值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！