How to set different color in a select box due to selection with css

Question

I have a select box with 2 options. In the selct area the options are green for 1 red for 2

I had been able to set green also as the color for the predefined option. Now I would like to change this due to the incoming selection.

That means, if someone has 1 as predefined selection the color of the appearing conent of the shown select box should be green and if some has 2 as redefined selection the color of the appearing conent of the shown select box should be red.

https://jsfiddle.net/aqd7web5/2/

The whole thing only with css if possible.

Thanks in advance

Answer 1

You can achieve this by adding an onchange event to your select tag.
Try the code below:

HTML:
<select id="derselect" onchange="this.className=this.options[this.selectedIndex].className" class="green">
  <option class="green">Test 1
  <option class="red">Test 2
</select>

And your CSS:
.green { color:green}
.red {color:red}

:)

Answer 2

You may need to use some jQuery to do that easy, exemple:

<Select id="select_opt">
  <Option value="green">first</option>
  <Option value="red"> Second </option>
</Select>

Then when your document is ready

$('#select_opt').on('change', 'option' , function{ 

       $(this).attr('style' , 'text-color:' + $(this).val());

});