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

Question

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

Hansjörg Leichsenring

2022年5月25日 14:05

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

Topic select css options Wordpress

Category Web

butalin · Accepted Answer · 2019年3月11日 13:01

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

});

Nana Owusu-Marfo · Accepted Answer · 2019年3月10日 10:39

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}

:)

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

About