Стиль: цвет не работает в опции

Question

Я прочитал много таких вопросов, и я нашел много решений, но никто из них не работает для меня ...

Что я хочу? Я хочу выпадающее меню с черным по умолчанию, но остальные красные, поэтому я могу видеть, когда что-то меняю. Я мог бы использовать javascript onchange, но я предпочитаю использовать встроенный CSS.

Для простоты мы начнем с этим кодом html:

<p>Title: 
    <select id='myid'> 
     <option value="Myoption1" selected>Option 1</option> 
     <option value="Myoption2"><span style="color: 'red';">Option 2</span></option> 
     <option value="Myoption3" style="color: 'red';">Option 3</option> 
    </select> 
    </p> 

Ни работа: текст останется черным.

По правде говоря, мое выпадающее меню создано javascript, поэтому код более сложный, но я думаю, что проблема здесь.

Редактировать это не работает, либо (с или без ';'):

<p>Title: 
    <select id='myid'> 
     <option value="Myoption1" selected>Option 1</option> 
     <option value="Myoption2" style="color:#FFF000;">Option 2</option> 
     <option value="Myoption3" style="color:red;">Option 3</option> 
    </select> 
    </p> 

Answer 1

Удалить котировки

<p>Title: 
 
    <select id='myid'> 
 
     <option value="Myoption1" selected>Option 1</option> 
 
     <option value="Myoption2" style="color: red;">Option 2</option> 
 
     <option value="Myoption3" style="color: red;">Option 3</option> 
 
    </select> 
 
    </p>

Хотя, лучше практика является используйте CSS для этого

option:not(:first-child) { 
 
    color: red; 
 
}

<p>Title: 
 
    <select id='myid'> 
 
    <option value="Myoption1" selected>Option 1</option> 
 
    <option value="Myoption2">Option 2</option> 
 
    <option value="Myoption3">Option 3</option> 
 
    </select> 
 
</p>

Это выглядит намного ровнее, и обеспечивает разделение задач.

Answer 2

Я вижу, что в вашем стиле формат имеет неправильное значение, которое является перевернутой комой или чем-то вроде этого. Я думаю, что ваши коды должны быть, как это style="color:red;"

Answer 3

вы должны сделать две вещи

• удалить <span> тег из <option> тег, он не будет работать

т.е. вам необходимо заменить <option><span></span></option> на <option><option>

• удалять одинарные кавычки (') из вашего свойства цвета, это также не сработает.

т.е. вам нужно заменить цвет: 'красный' с цветом: красный

option{ 
 
    color:red; 
 
    }

<p>Title: 
 
    <select id='myid'> 
 
     <option value="Myoption1" selected>Option 1</option> 
 
     <option value="Myoption2">Option 2</option> 
 
     <option value="Myoption3">Option 3</option> 
 
    </select> 
 
    </p>