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

Попробуйте, это практически то же самое, но посмотрите, устраивает ли Chrome на Mac это: -)

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>