Skip to content

Commit

Permalink
fix(datepicker): remove red shadow from invalid range inputs in Firefox
Browse files Browse the repository at this point in the history
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 angular#20483.
  • Loading branch information
crisbeto committed Sep 3, 2020
1 parent f00f46a commit 19632fe
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions src/material/datepicker/date-range-input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down

0 comments on commit 19632fe

Please sign in to comment.