html - 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;
}