apply custom border color in angular material

Solutions on MaxInterview for apply custom border color in angular material by the best coders in the world

showing results for - "apply custom border color in angular material"
Mattheo
14 Oct 2017
1// mat-icon-stepper selected color change 
2::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 {
3    background-color: red!important;
4}
5
6//input outline color
7::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
8    color: red!important;
9    // opacity: 1!important;
10}
11
12//mat-input focused color
13::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
14    color: red!important;
15}
16
17// mat-input error outline color
18::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick{
19    color: red!important;
20    opacity: 0.8!important;
21}
22
23// mat-input carent color
24::ng-deep .mat-input-element {
25    caret-color: red!important;
26}
27
28// mat-input error carent color
29::ng-deep .mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {
30    caret-color: red!important;
31}
32
33// mat-label normal state style
34::ng-deep .mat-form-field-label {
35    color: rgba(0,0,0,.6)!important;
36    // color: $mainColor!important;
37}
38
39// mat-label focused style
40::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
41    color: red!important;
42}
43
44// mat-label error style
45::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label {
46    color: red!important;
47}
48