From 19632fe2da9d1681113632a49f05e8da382aa2ad Mon Sep 17 00:00:00 2001 From: crisbeto Date: Thu, 3 Sep 2020 14:14:22 +0200 Subject: [PATCH] fix(datepicker): remove red shadow from invalid range inputs in Firefox 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. --- 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); }