Select2-高亮显示的选项背景颜色宽度当您有长字符串时？

Question

我正在使用select2检索一些远程数据。 select2下拉列表的宽度固定为div。

当我得到结果并将鼠标悬停在结果选项上时，背景以蓝色突出显示，字体为白色。

如果我的结果项的字符串很长，则突出显示的背景似乎不会突出显示列表项的整个宽度，因此，如果字体颜色为白色，则看不到文本。

如何使列表项的突出显示背景跨结果的整个宽度。

<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--default .select2-results__option--highlighted[aria selected] 
{ background-color: #5897fb;
  color: white;
  overflow-x:  inherit;
}

Answer 2

我找到了解决方案 here

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