Выпадающие списки
Настройте собственные <select> с помощью пользовательского CSS, который изменяет первоначальный вид элемента.
На этой странице
Настройки по умолчанию
Для пользовательских меню <select> нужен только пользовательский класс .form-select, чтобы запускать пользовательские стили. Пользовательские стили ограничены начальным внешним видом <select> и не могут изменять <option> из-за ограничений браузера.
<selectclass="form-select"aria-label="Пример выбора по умолчанию"><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select>Размер
Вы также можете выбрать маленький или большой пользовательский элемент выбора, чтобы соответствовать нашим текстовым полям аналогичного размера.
<selectclass="form-select form-select-lg mb-3"aria-label=".form-select-lg пример"><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select><selectclass="form-select form-select-sm"aria-label=".form-select-sm пример"><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select>Также поддерживается атрибут multiple:
<selectclass="form-select"multiplearia-label="пример множественного выбора"><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select>Как и атрибут size:
<selectclass="form-select"size="3"aria-label="пример элемента выбора размером равному 3"><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select>Отключено
Добавьте логический атрибут disabled для выбора, чтобы придать ему серый вид и удалить события указателя.
<selectclass="form-select"aria-label="Disabled select example"disabled><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select>CSS
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:$input-disabled-bg;$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 5 6 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:$input-border-radius;$form-select-box-shadow:var(--#{$prefix}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-border-radius-sm:$input-border-radius-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-border-radius-lg:$input-border-radius-lg;$form-select-transition:$input-transition;