mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-05 17:24:20 +01:00
82 lines
2.3 KiB
Markdown
82 lines
2.3 KiB
Markdown
---
|
|
layout: docs
|
|
title: Select
|
|
description: Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
|
|
group: forms
|
|
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 >}}
|
|
<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>
|
|
{{< /example >}}
|
|
|
|
## Sizing
|
|
|
|
You may also choose from small and large custom selects to match our similarly sized text inputs.
|
|
|
|
{{< example >}}
|
|
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg 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=".form-select-sm example">
|
|
<option selected>Open this select menu</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
{{< /example >}}
|
|
|
|
The `multiple` attribute is also supported:
|
|
|
|
{{< example >}}
|
|
<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>
|
|
{{< /example >}}
|
|
|
|
As is the `size` attribute:
|
|
|
|
{{< example >}}
|
|
<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>
|
|
{{< /example >}}
|
|
|
|
## Disabled
|
|
|
|
Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.
|
|
|
|
{{< example >}}
|
|
<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>
|
|
{{< /example >}}
|
|
|
|
## Sass
|
|
|
|
### Variables
|
|
|
|
{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}
|