Bootstrap Form Select

Bootstrap 5 highly customizes the native HTML <select> element using a custom class: .form-select. Instead of relying absolutely on unpredictable, jarring, default operating-system UI styling, this class overrides it, creating a consistently elegant dropdown interaction complete with a custom SVG arrow graphic.

Basic Select Menu

Apply the .form-select class to any <select> element. It automatically consumes 100% of the horizontal width (unless constrained by your layout grid) and adds smooth borders and rounded corners.

<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>
</select>

Sizing

Similar to standard form controls, the `.form-select` element uses modifiers to directly manipulate its bounding size. Use .form-select-lg for larger inputs to match large buttons, and .form-select-sm for compact spacing!

<!-- Large Form Select -->
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
    <option selected>Large dropdown</option>
    ...
</select>

<!-- Small Form Select -->
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
    <option selected>Small dropdown</option>
    ...
</select>

Multiple & Size Attributes

Bootstrap handles both the multiple (allows users to select numerous options holding CTRL/CMD) and the size="..." HTML attributes wonderfully. Specifically, triggering `multiple` correctly strips away the custom SVG arrow icon automatically because it transforms the dropdown into a rigid scrolling selection box!

<!-- Adding the multiple attribute transforms it into a scrollable box! -->
<select class="form-select" multiple aria-label="multiple select example">
    <option value="php">PHP</option>
    <option value="js">JavaScript</option>
    ...
</select>

Disabled Select & Disabled Options

You can effectively stop interactions globally by injecting the disabled attribute violently into the opening <select> tag. It visually dims the outline background color. Furthermore, you can optionally strategically apply the `disabled` property solely to specific <option> tags, causing only those individual items within the dropdown array to remain unselectable.

<!-- Apply to <select> to disable everything -->
<select class="form-select" disabled>
    <option selected>I am disabled</option>
</select>

<!-- Apply to an <option> to just lock that one unique item -->
<select class="form-select">
    <option selected>Choose an option</option>
    <option value="1">Available Option</option>
    <option value="2" disabled>Disabled Option</option>
</select>