Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

Выпадающие списки

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

Настройки по умолчанию

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

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Определение размера

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

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

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

<select class="form-select" multiple aria-label="multiple select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

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

<select class="form-select" size="3" aria-label="size 3 select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>