Select

Customize the native <select>s with custom CSS that changes the element’s initial appearance.

Default

Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.

Select - 图1

html

  1. <select class="form-select" aria-label="Default select example">
  2. <option selected>Open this select menu</option>
  3. <option value="1">One</option>
  4. <option value="2">Two</option>
  5. <option value="3">Three</option>
  6. </select>

Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

Select - 图2

html

  1. <select class="form-select form-select-lg mb-3" aria-label="Large select example">
  2. <option selected>Open this select menu</option>
  3. <option value="1">One</option>
  4. <option value="2">Two</option>
  5. <option value="3">Three</option>
  6. </select>
  7. <select class="form-select form-select-sm" aria-label="Small select example">
  8. <option selected>Open this select menu</option>
  9. <option value="1">One</option>
  10. <option value="2">Two</option>
  11. <option value="3">Three</option>
  12. </select>

The multiple attribute is also supported:

Select - 图3

html

  1. <select class="form-select" multiple aria-label="Multiple select example">
  2. <option selected>Open this select menu</option>
  3. <option value="1">One</option>
  4. <option value="2">Two</option>
  5. <option value="3">Three</option>
  6. </select>

As is the size attribute:

Select - 图4

html

  1. <select class="form-select" size="3" aria-label="Size 3 select example">
  2. <option selected>Open this select menu</option>
  3. <option value="1">One</option>
  4. <option value="2">Two</option>
  5. <option value="3">Three</option>
  6. </select>

Disabled

Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.

Select - 图5

html

  1. <select class="form-select" aria-label="Disabled select example" disabled>
  2. <option selected>Open this select menu</option>
  3. <option value="1">One</option>
  4. <option value="2">Two</option>
  5. <option value="3">Three</option>
  6. </select>

CSS

Sass variables

scss/_variables.scss

  1. $form-select-padding-y: $input-padding-y;
  2. $form-select-padding-x: $input-padding-x;
  3. $form-select-font-family: $input-font-family;
  4. $form-select-font-size: $input-font-size;
  5. $form-select-indicator-padding: $form-select-padding-x * 3; // Extra padding for background-image
  6. $form-select-font-weight: $input-font-weight;
  7. $form-select-line-height: $input-line-height;
  8. $form-select-color: $input-color;
  9. $form-select-bg: $input-bg;
  10. $form-select-disabled-color: null;
  11. $form-select-disabled-bg: $input-disabled-bg;
  12. $form-select-disabled-border-color: $input-disabled-border-color;
  13. $form-select-bg-position: right $form-select-padding-x center;
  14. $form-select-bg-size: 16px 12px; // In pixels because image dimensions
  15. $form-select-indicator-color: $gray-800;
  16. $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>");
  17. $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding;
  18. $form-select-feedback-icon-position: center right $form-select-indicator-padding;
  19. $form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half;
  20. $form-select-border-width: $input-border-width;
  21. $form-select-border-color: $input-border-color;
  22. $form-select-border-radius: $input-border-radius;
  23. $form-select-box-shadow: var(--#{$prefix}box-shadow-inset);
  24. $form-select-focus-border-color: $input-focus-border-color;
  25. $form-select-focus-width: $input-focus-width;
  26. $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color;
  27. $form-select-padding-y-sm: $input-padding-y-sm;
  28. $form-select-padding-x-sm: $input-padding-x-sm;
  29. $form-select-font-size-sm: $input-font-size-sm;
  30. $form-select-border-radius-sm: $input-border-radius-sm;
  31. $form-select-padding-y-lg: $input-padding-y-lg;
  32. $form-select-padding-x-lg: $input-padding-x-lg;
  33. $form-select-font-size-lg: $input-font-size-lg;
  34. $form-select-border-radius-lg: $input-border-radius-lg;
  35. $form-select-transition: $input-transition;