css - Bootstrap 4 - 多选在溢出时不会突出显示整个元素

在多选元素上使用 Bootstrap 4 的表单控件时，我遇到了所选元素在溢出时如何呈现的问题。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-3">
    <select multiple style="overflow-x: auto;" class="form-control">
      <option>asdf asdf asdf asdf asdf asdf asdf asdf</option>
      <option>123</option>
    </select>
  </div>
</div>

如果我选择 asdf... 选项，元素的一部分会显示蓝色突出显示，但是当您向右滚动时，它不会继续，其余的文本是白色背景上的白色，这使得阅读非常困难。

见 jsfiddle

最佳答案

这可能不是正确的方法，但您可以通过更改选项标签的 显示 属性来修复它

option{
  display: table-row;
}

关于css - Bootstrap 4 - 多选在溢出时不会突出显示整个元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57642668/