View on GitHub

Элемент выбора (select)

Настройте собственные <select> с помощью настраиваемого CSS, который изменяет первоначальный вид элемента.

На этой странице

По умолчанию

Для пользовательских меню <select> нужен только пользовательский класс .form-select, чтобы запускать пользовательские стили. Пользовательские стили ограничены начальным внешним видом <select> и не могут изменять <option> из-за ограничений браузера.

<select class="form-select" aria-label="Пример выбора по умолчанию">
  <option selected>Откройте это меню выбора</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

Размер

Вы также можете выбрать маленький или большой пользовательский элемент выбора, чтобы соответствовать нашим текстовым полям аналогичного размера.

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg пример">
  <option selected>Откройте это меню выбора</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

<select class="form-select form-select-sm" aria-label=".form-select-sm пример">
  <option selected>Откройте это меню выбора</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

Также поддерживается атрибут multiple:

<select class="form-select" multiple aria-label="пример множественного выбора">
  <option selected>Откройте это меню выбора</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

Как и атрибут size:

<select class="form-select" size="3" aria-label="пример элемента выбора размером равному 3">
  <option selected>Откройте это меню выбора</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

Отключенный

Добавьте логический атрибут disabled для выбора, чтобы придать ему серый вид и удалить события указателя.

<select class="form-select" aria-label="Disabled select example" disabled>
  <option selected>Откройте это меню выбора</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>