FM / forms

/var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/forms/

/var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/forms

Name	Size	Mode	Actions
checks-radios.md	13316	0644	edit dl rm
floating-labels.md	6900	0644	edit dl rm
form-control.md	7767	0644	edit dl rm
input-group.md	13067	0644	edit dl rm
layout.md	13138	0644	edit dl rm
overview.md	6302	0644	edit dl rm
range.md	1801	0644	edit dl rm
select.md	2407	0644	edit dl rm
validation.md	18037	0644	edit dl rm

Edit: /var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/forms/select.md (2407B)

---
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 >}}

## CSS

### Sass variables

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

--- layout: docs title: Select description: Customize the native `` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the ` {{< /example >}} ## Sizing You may also choose from small and large custom selects to match our similarly sized text inputs. {{< example >}} {{< /example >}} The `multiple` attribute is also supported: {{< example >}} {{< /example >}} As is the `size` attribute: {{< example >}} {{< /example >}} ## Disabled Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events. {{< example >}} {{< /example >}} ## CSS ### Sass variables {{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}