Очевидно, что это не так просто, как я ожидал, но я пытаюсь добавить цвета к определенным параметрам в поле выбора. Опции на самом деле являются динамическими c, но, поскольку это не имеет отношения к вопросу, я просто опубликую HTML. Меня не волнует, изменился ли фон или просто цвет текста, но я не могу ничего изменить! Я тестирую в Linux Ubuntu Firefox, но в конечном итоге он понадобится для работы в iOS Safari.
В файле CSS:
.ColorRed {
background: red;
}
.ColorGreen {
background: green;
}
В форме:
<select name="Storage" id="Storage">
<option value=""></option>
<option value="40">SV-COUNTER</option>
<option value="8">SV-C1-B1</option>
<option value="9">SV-C1-B2</option>
<option value="10" class="ColorGreen">SV-C1-B3</option>
<option value="11" class="ColorRed">SV-C1-B4</option>
<option value="12">SV-C1-B5</option>
<option value="13">SV-C1-F1</option>
</select>
Когда классы не работали, я думал, что какой-то другой стиль может переопределять его, поэтому попробовал встроенные стили, но он тоже ничего не делал.
<select name="Storage" id="Storage">
<option value=""></option>
<option value="40">SV-COUNTER</option>
<option value="8">SV-C1-B1</option>
<option value="9">SV-C1-B2</option>
<option value="10" style="background:green !important;">SV-C1-B3</option>
<option value="11" style="background:red !important;">SV-C1-B4</option>
<option value="12">SV-C1-B5</option>
<option value="13">SV-C1-F1</option>
</select>
Снимок экрана не показывает раскрывающийся раскрывающийся список (он закрывается при создании снимка экрана), но при открытии в нем нет цвета, несмотря на отображение консоли отладчика цвет.

Как мне сделать sh это?