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 | |
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
-rw-r--r-- | scss/forms/_form-control.scss | 9 | ||||
-rw-r--r-- | site/content/docs/5.2/forms/form-control.md | 6 |
2 files changed, 9 insertions, 6 deletions
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index e7eeca769e..e707c57ea2 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -59,13 +59,12 @@ opacity: 1; } - // Disabled and read-only inputs + // Disabled inputs // // HTML5 says that controls under a fieldset > legend:first-child won't be // disabled if the fieldset is disabled. Due to implementation difficulty, we // don't honor that edge case; we style them as disabled anyway. - &:disabled, - &[readonly] { + &:disabled { color: $input-disabled-color; background-color: $input-disabled-bg; border-color: $input-disabled-border-color; @@ -110,6 +109,10 @@ border: solid transparent; border-width: $input-border-width 0; + &:focus { + outline: 0; + } + &.form-control-sm, &.form-control-lg { padding-right: 0; 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"> |