Как изменить цвет фона опций select в CSS и JavaScript

Быстрый ответ

Чтобы обеспечить совместимость с различными браузерами при изменении фона элемента <select>, простым решением будет использование JavaScript-плагина Select2. Эта библиотека помогает избежать проблем, связанных со стилизацией элементов с помощью CSS, которая может работать не в каждом браузере. Select2 позволит вам создать эстетически приятный выпадающий список с кастомизированными элементами <option>.

Вот пример интеграции с Select2:

// Select2 надевает плащ супергероя, чтобы победить несовместимость CSS.
$('select').select2({
  templateResult: function (state) {
    if (!state.id) {
      return state.text;
    }
    var $state = $('<span style="background-color:#FFD700">' + state.text + '</span>');
    return $state;
  }
});

И сделано! Теперь фон опций выпадающего списка окрашен в яркий жёлтый цвет и корректно отображается во всех браузерах.

Эксперименты с CSS

Готовы выйти за пределы зоны комфорта и попробовать стилизацию через CSS? Но будьте готовы к тому, что результаты могут оказаться непредсказуемыми из-за различий в совместимости браузеров. Вот продвинутый пример применения стилей в CSS:

/* Даем серый фон всем опциям */
select option {
  background-color: #e9e9e9; // Серый цвет "из 50 оттенков серого"
}

/* Окрашиваем опции с определенным значением */
option[value="urgent"] {
  background-color: red; // Ярко-красный цвет для срочности
}

/* Играем с прозрачностью */
option[value="info"] {
  background-color: rgba(0, 123, 255, 0.5); // Полупрозрачный синий, чтобы добавить яркости
}

/* Используем !important для особых случаев */
option.important {
  background-color: #ffcc00 !important; // И это уже солнечный желтый
}

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

Кастомизация на стероидах с помощью JavaScript

Если CSS вас не удовлетворил, всегда можно обратиться к JavaScript. С его помощью можно добавлять классы к элементам option или использовать событие onchange для динамической смены стилей: