diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss index e24444c82c93..391a5c7346a0 100644 --- a/src/lib/input/_input-theme.scss +++ b/src/lib/input/_input-theme.scss @@ -25,7 +25,7 @@ // :focus is applied to the input, but we apply mat-focused to the other elements // that need to listen to it. - &.mat-focused { + .mat-focused & { color: $input-floating-placeholder-color; &.mat-accent { @@ -43,7 +43,7 @@ // See mat-input-placeholder-floating mixin in input.scss input.mat-input-element:-webkit-autofill + .mat-input-placeholder, - .mat-input-placeholder.mat-float.mat-focused { + .mat-focused .mat-input-placeholder.mat-float { .mat-placeholder-required { color: $input-required-placeholder-color; } @@ -63,4 +63,15 @@ } } } + + .mat-input-container.ng-invalid.ng-touched:not(.mat-focused) { + .mat-input-placeholder, + .mat-placeholder-required { + color: $input-underline-color-warn; + } + + .mat-input-underline { + border-color: $input-underline-color-warn; + } + } } diff --git a/src/lib/input/input-container.html b/src/lib/input/input-container.html index da1ac4b7c61c..cefe5a06f8d1 100644 --- a/src/lib/input/input-container.html +++ b/src/lib/input/input-container.html @@ -12,7 +12,6 @@