0

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

0

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}

:)

0

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());

});
  • Thanks. So there is no option without JS? – Hansjörg Leichsenring Mar 12 at 14:32
  • You need to do that dynamicly, css is static in events, text color change when event happen and css don't suport user events. – mjprogramation Mar 12 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.