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>