Select2 - выделенная опция Цвет фона Ширина Когда у вас длинные строки?

Question

Я использую select2 для извлечения некоторых удаленных данных. Выпадающий список select2 имеет фиксированную ширину дел.

Когда я получаю результаты и наводю курсор на параметр результата, фон выделяется синим цветом, а шрифт - белым.

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

Как сделать так, чтобы выделенный фон элемента списка охватывал всю ширину результата.

<select id="example" style="width: 200px">
  <option></option>
  <option >Joe blogs (joe.blogs@gmail.com) </option>
  <option >AUserWithAVeryLongName AUserWithAVeryLongName (a.user.with.a.very.long.name@gmail.com)</option>
</select>

$('#example').select2({
   placeholder: 'Select'
});

Смотрите мои фото для иллюстрации. На рисунке 1 я изменил шрифт на красный, чтобы вы могли видеть, что выбранный элемент.

На рис. 2 шрифт белого цвета, и когда вы прокручиваете горизонтально до конца поля результатов, вы не можете видеть, что представляет собой полный текст.

Обратите внимание, что в приведенном выше примере возвращается только один элемент результата, а полная строка равна

AUserWithAVeryLongName AUserWithAVeryLongName (a.user.with.a.very.long.name@gmail.com)

Answer 1

Я нашел решение здесь

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: green;
    color: black;
    display: table-row;
}

Answer 2

Надеюсь, что это может решить вашу проблему:

.select2-container--default .select2-results__option--highlighted[aria selected] 
{ background-color: #5897fb;
  color: white;
  overflow-x:  inherit;
}