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 >} }
Open this select menu

One Two Three

{ {< /example >} }

Sizing#

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

{ {< example >} }
Open this select menu

One Two Three

Open this select menu

One Two Three

{ {< /example >} }

The multiple attribute is also supported:

{ {< example >} }
Open this select menu

One Two Three

{ {< /example >} }

As is the size attribute:

{ {< example >} }
Open this select menu

One Two Three

{ {< /example >} }

Disabled#

Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.

{ {< example >} }
Open this select menu

One Two Three

{ {< /example >} }

CSS#

Sass variables#

{ { < scss-docs name="form-select-variables" file="scss/_variables.scss" }}