Skip to main content

Select

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

Default

<select class="form-select" id="selectDefault" name="selectDefault" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</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" id="selectLarge" name="selectLarge" aria-label="Large select example">
  <option selected>Large select</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>
<select class="form-select form-select-sm" id="selectSmall" name="selectSmall" aria-label="Small select example">
  <option selected>Small select</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

Multiple select

<select class="form-select" id="selectMultiple" name="selectMultiple" multiple aria-label="Multiple select example" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Disabled

<select class="form-select" id="selectDisabled" name="selectDisabled" aria-label="Disabled select example" disabled>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
</select>