---
title: Select
description: Customize the native `<select>`s with custom CSS that changes the element’s initial appearance.
toc: true
---

## 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.

<Example code={`<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

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

<Example code={`<select class="form-select form-select-lg mb-3" aria-label="Large 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>

  <select class="form-select form-select-sm" aria-label="Small 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>`} />

The `multiple` attribute is also supported:

<Example code={`<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>`} />

As is the `size` attribute:

<Example code={`<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.

<Example code={`<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>`} />

## CSS

### Sass variables

<ScssDocs name="form-select-variables" file="scss/_variables.scss" />