4c7a3e8adf
* WIP: Mention variables, mixins, and loops in docs * Add Sass sections to component pages * add sass docs for forms and content * Update buttons.md * Remove empty mixins sections * Massive update to utilities and some consistency changes Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2.3 KiB
| 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 >}}
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 >}}
Sass
Variables
{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}