diff options
| author | Mark Otto <markd.otto@gmail.com> | 2022-06-14 17:25:49 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-06-14 17:25:49 +0300 |
| commit | ac0b87b2071ed5bedeaad47f2a909640c85323bc (patch) | |
| tree | fcfba46a93bc3c90080ccb2fe62fec3bdb230b00 /site | |
| parent | dfe7472431b7fc7745edb48f3ed1b9c1390c84a7 (diff) | |
Don't style `readonly` inputs as `disabled` (#36499)
* Don't style readonly inputs as disabled
Also remove the Chrome-specific focus styling from readonly plaintext
* Update some docs comments
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/5.2/forms/form-control.md | 6 |
1 files changed, 3 insertions, 3 deletions
diff --git a/site/content/docs/5.2/forms/form-control.md b/site/content/docs/5.2/forms/form-control.md index 046004d7c0..4d6972d1df 100644 --- a/site/content/docs/5.2/forms/form-control.md +++ b/site/content/docs/5.2/forms/form-control.md @@ -31,7 +31,7 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`. ## Disabled -Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events. +Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing. {{< example >}} <input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled> @@ -40,7 +40,7 @@ Add the `disabled` boolean attribute on an input to give it a grayed out appeara ## Readonly -Add the `readonly` boolean attribute on an input to prevent modification of the input's value. +Add the `readonly` boolean attribute on an input to prevent modification of the input's value. `readonly` inputs can still be focused and selected, while `disabled` inputs cannot. {{< example >}} <input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly> @@ -48,7 +48,7 @@ Add the `readonly` boolean attribute on an input to prevent modification of the ## Readonly plain text -If you want to have `<input readonly>` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding. +If you want to have `<input readonly>` elements in your form styled as plain text, replace `.form-control` with `.form-control-plaintext` to remove the default form field styling and preserve the correct `margin` and `padding`. {{< example >}} <div class="mb-3 row"> |