HTML更改CSS选项中文本的字体颜色（Mac OS，Chrome）

Question

我试图更改这样的选项的颜色，但似乎没有更改样式中指定的颜色。我在这里想念什么？

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

编辑：在我的计算机上运行的结果的屏幕快照Mac OS（Chrome版本67.0.3396.79（正式版本）（64位））

Answer 1

更新01

尝试一下，实际上是一样的，但是看看Mac上的chrome是否对此很满意：-）

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>

原始答案：

也许您需要的是...。

<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. 请注意，select元素的绿色是硬编码的，因为第一个/默认选项是绿色
2. ，然后选择的onchange将基于所选选项重新应用样式。 （您也可以在JS中创建一个特定的函数，但是如果您的需求不会增长，则此代码可以解决问题）

Answer 2

我认为您想根据选择更改选择的颜色。因此；

<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

您可以尝试使用颜色代码代替“红色” /“绿色”

请参阅以下颜色代码， https://www.w3schools.com/cssref/css_colors.asp

尝试以下编码，

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