From ac0b87b2071ed5bedeaad47f2a909640c85323bc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 Jun 2022 07:25:49 -0700 Subject: 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 --- scss/forms/_form-control.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'scss/forms') 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; -- cgit v1.2.3