CSS Background Color Based On Select Value
Hopefully a simple question here. I have the following html code:
Solution 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());
});
Solution 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>
Post a Comment for "CSS Background Color Based On Select Value"