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

  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

  1. <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg 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=".form-select-sm 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

  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

  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

  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>