From bdc5aa3533f3aa1840b27de1bf836f9a66b4da16 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 16 Sep 2020 04:25:44 +0200 Subject: [PATCH] fix(datepicker): remove red shadow from invalid range inputs in Firefox (#20489) Firefox automatically adds a red `box-shadow` to invalid inputs. These changes remove it from the inner range inputs since their invalid state is shown through the `mat-form-field`. Fixes #20483. (cherry picked from commit 50eca15c1175b7721f991deb506b4c97febabf81) --- src/material/datepicker/date-range-input.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/material/datepicker/date-range-input.scss b/src/material/datepicker/date-range-input.scss index 5f96c9eb08d5..7f418a122835 100644 --- a/src/material/datepicker/date-range-input.scss +++ b/src/material/datepicker/date-range-input.scss @@ -58,6 +58,12 @@ $mat-date-range-input-part-max-width: calc(50% - #{$mat-date-range-input-separat display: none; } + // Undo the red box-shadow glow added by Firefox on invalid inputs. + // See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid + &:-moz-ui-invalid { + box-shadow: none; + } + @include input-placeholder { @include _mat-date-range-input-placeholder-transition(color); }