Перейти к основному содержанию

Select

Настройте собственные <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 атрибут:

<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>