Содержание
Select
Customize the native s with custom CSS that changes the element’s initial appearance.
Default
Custom menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the ’s initial appearance and cannot modify the s due to browser limitations.
select class="form-select" aria-label="Default select example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>Sizing
You may also choose from small and large custom selects to match our similarly sized text inputs.
select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select> select class="form-select form-select-sm" aria-label=".form-select-sm example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>The multiple attribute is also supported:
select class="form-select" multiple aria-label="multiple select example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>select class="form-select" size="3" aria-label="size 3 select example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>Disabled
Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.
select class="form-select" aria-label="Disabled select example" disabled> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>Sass
Variables
$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-x center; $form-select-bg-size: 16px 12px; // In pixels because image dimensions $form-select-indicator-color: $gray-800; $form-select-indicator: url("data:image/svg+xml,"); $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding; $form-select-feedback-icon-position: center right $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: $box-shadow-inset; $form-select-focus-border-color: $input-focus-border-color; $form-select-focus-width: $input-focus-width; $form-select-focus-box-shadow: 0 0 0 $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; - Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- Currently v5.1.3.
- Analytics by Fathom.
Select
Customize the native s with custom CSS that changes the element’s initial appearance.
Default
Custom menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the ’s initial appearance and cannot modify the s due to browser limitations.
select class="form-select" aria-label="Default select example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>Sizing
You may also choose from small and large custom selects to match our similarly sized text inputs.
select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select> select class="form-select form-select-sm" aria-label=".form-select-sm example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>The multiple attribute is also supported:
select class="form-select" multiple aria-label="multiple select example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>select class="form-select" size="3" aria-label="size 3 select example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>Disabled
Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.
select class="form-select" aria-label="Disabled select example" disabled> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>Sass
Variables
$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-x center; $form-select-bg-size: 16px 12px; // In pixels because image dimensions $form-select-indicator-color: $gray-800; $form-select-indicator: url("data:image/svg+xml,"); $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding; $form-select-feedback-icon-position: center right $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: 0 0 0 $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; - Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- Currently v5.0.2.
- Analytics by Fathom.
Выпадающие списки
Настройте собственные с помощью пользовательского CSS, который изменяет первоначальный вид элемента.
Настройки по умолчанию
Для настраиваемых меню требуется указать только настраиваемый класс .form-select для запуска настраиваемых стилей. Пользовательские стили ограничены начальным внешним видом и не могут изменять из-за ограничений браузера.
select class="form-select" aria-label="Default select example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>Размер
Вы также можете выбирать из небольших и больших пользовательских выборок для соответствия текстового ввода аналогичного размера.
select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select> select class="form-select form-select-sm" aria-label=".form-select-sm example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>Также поддерживается множественный атрибут multiple :
select class="form-select" multiple aria-label="multiple select example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>select class="form-select" size="3" aria-label="size 3 select example"> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> select>Отключено
Добавьте логический disabled для придания ему неактивного вида и удаления события указателя.
select class="form-select" aria-label="Disabled select example" disabled> option selected>Open this select menuoption> option value="1">Oneoption> option value="2">Twooption> option value="3">Threeoption> 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-x center; $form-select-bg-size: 16px 12px; // In pixels because image dimensions $form-select-indicator-color: $gray-800; $form-select-indicator: url("data:image/svg+xml,"); $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding; $form-select-feedback-icon-position: center right $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: 0 0 0 $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;