Многоцветный тег HTML option (combobox)

Question

Мне нужен способ использовать два цвета в теге html option.Для этого я написал следующий код:

<select>
<option><span style="color: red;">color red1</span> - default color1</option>
<option><span style="color: red;">color red2</span> - default color2</option>
<option><span style="color: red;">color red3</span> - default color3</option>
</select>

Как видите, цветовая стилизация не работает.Так есть ли способ использовать несколько цветов в теге параметра?

Answer 1

Нечто подобное должно работать.

<style >
option.red{background-color: red; }
option.blue{background-color: blue;}
</style>

<select name=colors>
<option class="red" >red</option>
<option class="blue">blue</option>
</select>

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

Answer 2

Возможно, вам придется переместить атрибут style в элемент option.Также рекомендуется использовать класс вместо встроенного стиля для повторного использования.

Также примечание: входы / выборки / флажки и т. Д. Имеют стили для браузера.Имейте это в виду при разработке поддержки нескольких браузеров.

ОБНОВЛЕНИЕ 1 : Извинения за отсутствие конечной цели.К сожалению, элемент option не может иметь дочерних элементов, и стилизация как таковая завершится неудачей.

Обойти это можно, создав собственный элемент select, используя стандартные элементы <div>

<div>Some Text<span> - Second Text</span><div>

Пример пользовательского выбора из школ W3

.twoTone {
  color: black;
}
.twoTone span {
  color: red;
}

<select>
<!-- Does Not work because options cannot have child elements -->
<option class='twoTone'><span>color red1</span> - default color1</option>
<option><span style="color: red;">color red2</span> - default color2</option>
<option><span style="color: red;">color red3</span> - default color3</option>
</select>

<!-- Works because divs allow child elements -->
<div class='twoTone'><span>Red Text -</span> Black Text </div>