Following the example from Angular's official documentation, I have come across a road block with .css when using <input mdInput ..../> from Angular Material.
Given .css from the tutorial:
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
I get the following design in my output:
How do I fix the CSS from "bleed through" the text input?
The Material Input Component has a dividerColor attribute, which is more straightforward than customizing the CSS.
Divider Color
The divider (line under the input content) color can be changed by using the dividerColor attribute of md-input-container. A value of primary is the default and will correspond to the theme primary color. Alternatively, accent or warn can be specified to use the theme's accent or warn color.
<md-input-container [dividerColor]="passwordError ? 'warn' : 'primary'">
<input mdInput formControlName="password" type="password" placeholder="Password" autocomplete="off" required>
</md-input-container>
