From a5091cbc7c5f2ba893771d21325120b1ce640297 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 4 Jun 2022 09:32:54 -0700
Subject: [PATCH 1/2] Don't style readonly inputs as disabled

Also remove the Chrome-specific focus styling from readonly plaintext
---
 scss/forms/_form-control.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index e7eeca769e50..26aaed20a45d 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -64,8 +64,7 @@
   // 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;

From 9d2caef0fa2f61121ff1a09a7e80ec1ca7104f80 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 13 Jun 2022 14:17:03 -0700
Subject: [PATCH 2/2] Update some docs comments

---
 scss/forms/_form-control.scss               | 2 +-
 site/content/docs/5.2/forms/form-control.md | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 26aaed20a45d..e707c57ea294 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -59,7 +59,7 @@
     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
diff --git a/site/content/docs/5.2/forms/form-control.md b/site/content/docs/5.2/forms/form-control.md
index 046004d7c05c..4d6972d1dfb5 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">