I have a drop-down list of colors, and when selected, i want to change a value of css font color to the value of the selection.

How can i do this?

<select name="color">
          <option value="white" selected="selected">white</option>
          <option value="black">black</option>
          <option value="red">red</option>
          <option value="light blue">light blue</option>
          <option value="dark blue">dark blue</option>
          <option value="light green">light green</option>
          <option value="dark dreen">dark green</option>
          <option value="yellow">yellow</option>
          <option value="orange">orange</option>
          <option value="pink">pink</option>
          <option value="purple">purple</option>
          <option value="gray">gray</option>
        </select>

The css i want to change (its the text in a textfield)

#create form .text {
    height: 50px;
    width: 500px;
    font-size: 36px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:#fff;
}

I have a drop-down list of colors, and when selected, i want to change a value of css font color to the value of the selection.

How can i do this?

<select name="color">
          <option value="white" selected="selected">white</option>
          <option value="black">black</option>
          <option value="red">red</option>
          <option value="light blue">light blue</option>
          <option value="dark blue">dark blue</option>
          <option value="light green">light green</option>
          <option value="dark dreen">dark green</option>
          <option value="yellow">yellow</option>
          <option value="orange">orange</option>
          <option value="pink">pink</option>
          <option value="purple">purple</option>
          <option value="gray">gray</option>
        </select>

The css i want to change (its the text in a textfield)

#create form .text {
    height: 50px;
    width: 500px;
    font-size: 36px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:#fff;
}

• javascript
• css

Share Improve this question Follow asked Nov 28, 2009 at 10:27 mrpatgmrpatg 10.1k4444 gold badges114114 silver badges170170 bronze badges 1

• This is a pretty classic example of JavaScript. It should have been easy enough to find using Google. – Justin Johnson Commented Nov 28, 2009 at 11:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

This will work for colors except light/dark blue/green : to make them work, remove the spaces in the value attributes of the corresponding option tags (and fix the typo in dark dreen)

<script language="javascript">
  function setColor()
  {
    var color = document.getElementById("color").value;
    document.getElementById("txtID").style.color = color;
  }
</script>

<select id="color" onclick="setColor();">...</select>

This is really easy using jQuery (or most of the library's)

$('#color').change(function(){
   $('#create form .text').css('color', $(this).val());
});  

I think the code is pretty self explaining

EDIT
Just noticed some of your values are not real colors, you could use a switch for these cases, or decide to give them a value with the css color name: http://www.w3schools./css/css_colornames.asp