/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

0 vote240 views1 answer
Angular material open last visited tab
Javascript AngularJS
0 vote221 views1 answer
Propriedades checkbox angular
Javascript AngularJS
0 vote203 views2 answers
Unknown Provider angularjs
Javascript AngularJS
0 vote288 views1 answer
Toggle buttons angular styles
Javascript AngularJS
55 votes372 views2 answers
Angular start command
Javascript AngularJS
0 vote252 views3 answers
Angular stepper change wait before changing
Javascript AngularJS
19 votes207 views6 answers
Generate component in angular
Javascript AngularJS
11 votes219 views2 answers
Angular print an array
Javascript AngularJS
0 vote235 views1 answer
Angular js sharepoint crud
Javascript AngularJS
0 vote334 views1 answer
Angular cannot access event.target.value of input element using $event
Javascript AngularJS