По умолчанию
Для пользовательских <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>