Issue
I've tried changing the stroke color in the mat input every way I can find, but the color is still purple. Font's color changed perfectly but border line's doesn't. What can I do with this?
Here is html:
<div class="login-page">
<h2>Login</h2>
<div id="form">
<form [formGroup]="loginForm">
<div class="justify-content-center">
<mat-form-field class="mffield" appearance="outline">
<mat-label>Username</mat-label>
<input matInput formControlName="username">
</mat-form-field>
</div>
<div class="justify-content-center">
<mat-form-field class="mffield" appearance="outline">
<mat-label>Password</mat-label>
<input type="password" matInput formControlName="password">
</mat-form-field>
</div>
<div id="controls" class="row">
<button style="width: 20%;" [disabled]="loginForm.invalid" (click)="submit()" mat-flat-button color="primary">
Login
</button>
</div>
</form>
</div>
</div>
Here is css:
...
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
border-color: red !important;
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
border-color: red !important;
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: red !important;
}
I tried this code
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
border-color: red !important;
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
border-color: red !important;
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: red !important;
}
And something like this:
.mat-form-field-appearance-outline .mat-form-field-outline {
color: white;
}
But this does not work for me.
Solution
Angular Material is pretty good with the css variables. In this case you probably want --mdc-outlined-text-field-outline-color which is the source of the outline color for text fields.
In the example below the outline color is set to red using the style property binding syntax.
<mat-form-field class="mffield" appearance="outline"
[style.--mdc-outlined-text-field-outline-color]="'red'">
<mat-label>Username</mat-label>
<input matInput formControlName="username">
</mat-form-field>
You should also be able to do this in css. I noticed the class named mffield on your form fields. You can simply set the property value in a rule for that class.
.mffield {
--mdc-outlined-text-field-outline-color: red;
}
Answered By - Daniel Gimenez
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.