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

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

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

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

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

<selectclass="form-select"aria-label="Default select example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>

Размер

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

<selectclass="form-select form-select-lg mb-3"aria-label=".form-select-lg example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><selectclass="form-select form-select-sm"aria-label=".form-select-sm example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>

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

<selectclass="form-select"multiplearia-label="multiple select example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>

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

<selectclass="form-select"size="3"aria-label="size 3 select example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>

Отключено

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

<selectclass="form-select"aria-label="Disabled select example"disabled><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>

Sass

Переменные

$form-select-padding-y:$input-padding-y;$form-select-padding-x:$input-padding-x;$form-select-font-family:$input-font-family;$form-select-font-size:$input-font-size;$form-select-indicator-padding:$form-select-padding-x*3;// Extra padding for background-image
$form-select-font-weight:$input-font-weight;$form-select-line-height:$input-line-height;$form-select-color:$input-color;$form-select-bg:$input-bg;$form-select-disabled-color:null;$form-select-disabled-bg:$gray-200;$form-select-disabled-border-color:$input-disabled-border-color;$form-select-bg-position:right$form-select-padding-xcenter;$form-select-bg-size:16px12px;// In pixels because image dimensions
$form-select-indicator-color:$gray-800;$form-select-indicator:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");$form-select-feedback-icon-padding-end:$form-select-padding-x*2.5+$form-select-indicator-padding;$form-select-feedback-icon-position:centerright$form-select-indicator-padding;$form-select-feedback-icon-size:$input-height-inner-half$input-height-inner-half;$form-select-border-width:$input-border-width;$form-select-border-color:$input-border-color;$form-select-border-radius:$border-radius;$form-select-box-shadow:$box-shadow-inset;$form-select-focus-border-color:$input-focus-border-color;$form-select-focus-width:$input-focus-width;$form-select-focus-box-shadow:000$form-select-focus-width$input-btn-focus-color;$form-select-padding-y-sm:$input-padding-y-sm;$form-select-padding-x-sm:$input-padding-x-sm;$form-select-font-size-sm:$input-font-size-sm;$form-select-padding-y-lg:$input-padding-y-lg;$form-select-padding-x-lg:$input-padding-x-lg;$form-select-font-size-lg:$input-font-size-lg;$form-select-transition:$input-transition;