layout: docs
title: Select
description: Customize the native <select>
s with custom CSS that changes the element's initial appearance.
group: forms
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 >}}
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 >}}
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 >}}
{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}