HTML change font color of text in option with CSS (Mac OS, Chrome)

Question

I attempted to change the color of an option like this but doesn't seem to change the color specified in the style. What am I missing here?

 <select name="test" > <option value="green" style="color:green;">this is green</option> <option value="red" style="color:red;">this is red</option> </select> 

EDIT: Screenshot of the result running on my computer Mac OS (Chrome Version 67.0.3396.79 (Official Build) (64-bit))

Answer 1

Update 01

Give this a try, it is effectively the same, but see if chrome on mac is happy with this :-)

 function selectionChanged(){ var selectElement = document.getElementById('test'); var selectedOption = selectElement.selectedIndex; selectElement.style.color = selectElement.options[selectedOption].value; } 

 <select name="test" id="test" onchange="selectionChanged()" style="color: green"> <option value="green" style="color:green;">this is green</option> <option value="red" style="color:red;">this is red</option> </select> 

Original answer:

Perhaps what you need is....

 <select name="test" id="test" onchange="document.getElementById('test').style.color = document.getElementById('test').options[document.getElementById('test').selectedIndex].value" style="color: green"> <option value="green" style="color:green;">this is green</option> <option value="red" style="color:red;">this is red</option> </select> 

1. Note that the green color is hard-coded for select element since the first / default option is green
2. and then onchange of select will re-apply the style based on selected option. (You could also create a specific function in JS, but this code will do the trick if your requirements are not going to grow)

Answer 2

I think you want to change the color of the select based on the selection. Therefore;

 <select name="test" id="test" onchange="changeColor()"> <option value="green" style="color:green;">this is green</option> <option value="red" style="color:red;">this is red</option> </select> <script type="text/javascript"> function changeColor() { document.getElementById("test").style.color = document.getElementById("test").value; } </script> 

Answer 3

You could try to use colour code instead of "Red" / "Green"

Refer to below colour code, https://www.w3schools.com/cssref/css_colors.asp

Try below coding,

<font color="#FF0000">This is some text!</font>