Bootstrap текст опции множественного выбора скрыт при переполнении по горизонтали

Question

Я пытаюсь сделать множественный выбор, который имеет только одну горизонтальную полосу прокрутки, используя bootstrap, и я не хочу, чтобы каждый вариант имел горизонтальную полосу прокрутки.

Когда я выбираю самую длинную option (123456789012345678901234567890), выделена только часть текста этой опции, я вижу, что остальная часть текста этой опции не выбрана и скрыта при прокрутке вправо. Как это исправить?

<div class="row w-50">
<div class="col">
    <select multiple class="custom-select d-inline overflow-auto s1">
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

Вот что я сделал до сих пор: https://jsfiddle.net/sxb2tk97/

Проверено с использованием chrome.

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

Answer 1

Я решил обойти это, заключив элемент select в контейнер, сделав его прокручиваемым и удалив стиль класса select bootstrap. Он работал на chrome, но не на сафари.

.s1 {
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="row">
<div class="col-3 overflow-auto">
  <select multiple class="s1">
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
</div>
</div>