Символы Emoji в элементе управления списком (раскрывающимся списком) отображаются размытыми в Chrome и Safari (но не Firefox) на Mac

Question

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

Вот соответствующий фрагмент моего HTML:

  <select>
    <option value="">?</option>
    <option value="?">??</option>
    <option value="?">??</option>
    <option value="?">??</option>
    <option value="?">??</option>
    <option value="?">??</option>
  </select>

Отображается, как и ожидалось в Firefox для Ma c:

Однако (также для Ma c) в Chrome и в Safari цвета на невыбранных и не сфокусированных / невыделенных элементах выглядят очень «размытыми», поэтому трудно правильно различить gui sh их цвет:

Какой наилучший обходной путь или решение для правильного отображения оттенков кожи в последних браузерах?

Я использую Bootstrap 4, поэтому решения, использующие библиотеку Bootstrap CSS, являются приемлемыми (в дополнение к простым решениям HTML / CSS).

Пока что я имею пробовал:

• Установка атрибута CSS color (цвет текста переднего плана) для элементов select и / или option;
• Установка CSS * Атрибут 1036 * для элементов select и / или option;
• Настройка атрибута CSS opacity для элементов select и / или option;
• Установка -webkit-appearance: none на select и / или option элементов.