Mat Form Field Change Color

[Solved] Mat Form Field Change Color | Csharp - Code Explorer | yomemimo.com
Question : mat-form-field change color

Answered by : abdo-akl

// 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;
}

Source : https://stackoverflow.com/questions/51096529/changing-border-color-in-mat-form-field | Last Update : Sun, 27 Aug 23

Answers related to mat form field change color

Code Explorer Popular Question For Csharp