Changing border color in mat-form-field
For the newer outlined form fields, solved it this way:
::ng-deep {
.mat-form-field-appearance-outline .mat-form-field-outline {
color: white;
}
mat-form-field {
.mat-hint, input, ::placeholder, .mat-form-field-label {
color: white;
}
}
}
Add this CSS to your form-field-appearance-example.css:
/* Border */
.mat-form-field-appearance-outline .mat-form-field-outline {
color: white;
}
/* Font color */
input.mat-input-element {
color: white;
}
Though, there is still a problem while the field is focused.
SCSS
version of @sasa with colors as variables
::ng-deep {
$custom-main-color: red;
$custom-label-color: rgba(0, 0, 0, .6);
// mat-icon-stepper selected color change
.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
background-color: $custom-main-color !important;
}
// input outline color
.mat-form-field-appearance-outline .mat-form-field-outline {
color: $custom-main-color !important;
}
// mat-input focused color
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
color: $custom-main-color !important;
}
// mat-input error outline color
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
color: $custom-main-color !important;
opacity: 0.8 !important;
}
// mat-input caret color
.mat-input-element {
caret-color: $custom-main-color !important;
}
// mat-input error caret color
.mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {
caret-color: $custom-main-color !important;
}
// mat-label normal state style
.mat-form-field-label {
color: $custom-label-color !important;
}
// mat-label focused style
.mat-form-field.mat-focused .mat-form-field-label {
color: $custom-main-color !important;
}
// mat-label error style
.mat-form-field.mat-form-field-invalid .mat-form-field-label {
color: $custom-main-color !important;
}
}
I think this will cover everything.
// mat-icon-stepper selected color change
::ng-deep .mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
background-color: red!important;
}
//input outline color
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
color: red!important;
// opacity: 1!important;
}
//mat-input focused color
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
color: red!important;
}
// mat-input error outline color
::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick{
color: red!important;
opacity: 0.8!important;
}
// mat-input carent color
::ng-deep .mat-input-element {
caret-color: red!important;
}
// mat-input error carent color
::ng-deep .mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {
caret-color: red!important;
}
// mat-label normal state style
::ng-deep .mat-form-field-label {
color: rgba(0,0,0,.6)!important;
// color: $mainColor!important;
}
// mat-label focused style
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
color: red!important;
}
// mat-label error style
::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label {
color: red!important;
}