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

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index e7eeca769e50f2fb8e7d626b8d01590b67a0d351..e707c57ea2941112f478ffae1918ebc74ba9b1d9 100644 (file)
--- 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 046004d7c05ca0590330d795482b602d2acf943d..4d6972d1dfb5c328dc5bb6de45e3e001950edf78 100644 (file)
--- 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">