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

1 files changed, 6 insertions, 3 deletions

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index e7eeca769..e707c57ea 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;