/Javascript/AngularJS/Apply custom border color in angular material

Apply custom border color in angular material

// 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: stackoverflow.com

Similar codes

1 vote351 views1 answer
Iterate over enum angular ngfor
Javascript AngularJS
0 vote358 views1 answer
How to specify max number of character angular mat input
Javascript AngularJS
2 votes307 views4 answers
This version of CLI is only compatible with Angular versions
Javascript AngularJS
0 vote316 views1 answer
Scope hierarchy in angularjs
Javascript AngularJS
1 vote316 views2 answers
Angular route change scroll to top
Javascript AngularJS
0 vote334 views1 answer
Anchor click event angular refresh page
Javascript AngularJS
4 votes322 views1 answer
Declare * angular jquery
Javascript AngularJS
0 vote332 views2 answers
Check if item is already registered in angular angularfire site:stackoverflow.com
Javascript AngularJS
2 votes467 views1 answer
How to put background image in angular 11
Javascript AngularJS
-1 vote336 views2 answers
$.notify is not a function angular
Javascript AngularJS