bootstrap/site/content/docs/5.0/forms/select.md

layout, title, description, group, toc

layout	title	description	group	toc
docs	Select	Customize the native `<select>`s with custom CSS that changes the element's initial appearance.	forms	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 >}} 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 >}}

With icons

Like our textual .form-control, you can overlay icons on .form-selects. See the [form control with icon docs]({{< docsref "/forms/form-control#with-icons" >}}) for more details.

{{< example >}} Choose one

Open this select menu One Two Three

{{< /example >}}

Spinners

You can also place any of Bootstrap's [spinners]({{< docsref "/components/spinners" >}}) within the .form-control-icon.

{{< example >}} Choose one

Open this select menu One Two Three

Loading...

{{< /example >}}

Sizing

Add .form-select-sm or .form-select-lg to your .form-select and the .form-control-icon will automatically resize. However, the sizing of the icons themselves is up to you.

{{< example >}} Choose one

Open this select menu One Two Three

{{< /example >}}

{{< example >}} Choose one

Open this select menu One Two Three

{{< /example >}}