From 99676c780963d3cfe671294a776b738bb4876480 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 17 Jul 2019 06:56:54 -0700 Subject: Use :focus-within for .form-file focus state (#29036) Fixes #26563, closes #26576, closes #29021. --- scss/forms/_form-file.scss | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'scss') diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss index 7e6a0adba5..b3c0d0df02 100644 --- a/scss/forms/_form-file.scss +++ b/scss/forms/_form-file.scss @@ -14,11 +14,18 @@ margin: 0; opacity: 0; + // Separate rules for :focus and :focus-within as IE doesn't support the latter, and + // thus ignores the entire ruleset. See https://github.com/twbs/bootstrap/pull/29036. &:focus ~ .form-file-label { border-color: $form-file-focus-border-color; box-shadow: $form-file-focus-box-shadow; } + &:focus-within ~ .form-file-label { + border-color: $form-file-focus-border-color; + box-shadow: $form-file-focus-box-shadow; + } + // Use disabled attribute instead of :disabled pseudo-class // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231 &[disabled] ~ .form-file-label .form-file-text { -- cgit v1.2.3