Breaking News: Grepper is joining You.com. Read the official announcement!

apply custom border color in angular material

Plain Polecat answered on April 27, 2021 Popularity 8/10 Helpfulness 7/10

answer apply custom border color in angular material

related angular mat select border color

apply custom border color in angular material

Comment

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

Popularity 8/10 Helpfulness 7/10 Language javascript

Source: stackoverflow.com

Tags: angular-material apply border-color javascript

Link to this answer
Share Copy Link

Contributed on Apr 27 2021

Plain Polecat

0 Answers Avg Quality 2/10

Closely Related Answers

angular mat select border color

Comment

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color: blue !important;
}

Popularity 8/10 Helpfulness 10/10 Language css

Source: Grepper

Tags: angular border-color border-

Link to this answer
Share Copy Link

Contributed on Aug 05 2022

Wiley Wombat

0 Answers Avg Quality 2/10

apply custom border color in angular material

Contents

More Related Answers

apply custom border color in angular material

Closely Related Answers

angular mat select border color

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.