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

Question

当在多选元素上使用 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

Answer 1

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

option{
  display: table-row;
}