From c1d5a801b4bc66e3866f815be00e11d1b20d3539 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sat, 24 Jun 2023 14:44:36 +0200
Subject: Adding upstream version 5.3.0+dfsg.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 site/content/docs/5.3/forms/select.md | 81 +++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 site/content/docs/5.3/forms/select.md

(limited to 'site/content/docs/5.3/forms/select.md')

diff --git a/site/content/docs/5.3/forms/select.md b/site/content/docs/5.3/forms/select.md
new file mode 100644
index 0000000..07ee8c8
--- /dev/null
+++ b/site/content/docs/5.3/forms/select.md
@@ -0,0 +1,81 @@
+---
+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" >}}
-- 
cgit v1.2.3