Добавление цвета к некоторым параметрам выбора - PullRequest
2 голосов
/ 18 апреля 2020

Очевидно, что это не так просто, как я ожидал, но я пытаюсь добавить цвета к определенным параметрам в поле выбора. Опции на самом деле являются динамическими 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>

Снимок экрана не показывает раскрывающийся раскрывающийся список (он закрывается при создании снимка экрана), но при открытии в нем нет цвета, несмотря на отображение консоли отладчика цвет.

enter image description here

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

1 Ответ

1 голос
/ 18 апреля 2020

Ваш код выглядит нормально для меня, и он отлично работает.

ОБНОВЛЕНО

Мне кажется, select в разных операционных системах действует по-разному. Мы проверили ваш пример на:

  • P C win 10 Chrome - ok .
  • P C win 10 Firefox - нормально .
  • Ма c Chrome - не в порядке .
  • Ма c Сафари - нормально .
  • Ма c Firefox - не в порядке .
  • Linux Ubuntu Opera - в порядке
  • Linux Ubuntu Firefox - не в порядке
  • Linux Ubuntu Firefox - (WINE) ok
  • iOS Firefox - не в порядке
  • iOS Опера - не в порядке
  • iOS Safari - не в порядке
  • iOS MS Edge - не в порядке

Это определенно проблема браузеров + ОС .

Чтобы получить полный контроль над полем выбора css вы можете попробовать использовать некоторые jquery рамки, например select2

https://select2.org/

https://select2.org/getting-started/basic-usage

...