Select
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.
Preview
HTML
<select class="form-select" 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>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
<option value="11">Eleven</option>
<option value="12">Twelve</option>
<option value="13">Third</option>
<option value="14">Four</option>
<option value="15">Five</option>
</select>
Sizing
You may also choose from small and large custom selects to match our similarly sized text inputs.
Preview
HTML
<select
class="form-select form-select-lg mb-3"
aria-label=".form-select-lg example"
>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm" aria-label=".form-select-sm 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 Multiple
You may also choose from small and large custom selects to match our similarly sized text
inputs.
The multiple attribute is also supported:
Preview
HTML
<select class="form-select" multiple aria-label="multiple 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>
<div class="my-2"></div>
<select class="form-select" size="3" aria-label="size 3 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>
Disabled
Add the disabled boolean attribute on a select to give it a grayed out appearance and
remove pointer events.
Preview
HTML
<select class="form-select" aria-label="Disabled select example" disabled>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
