Changing border color in mat-form-field

by

I think this will cover everything.

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

More Related Contents:

  1. In RC.1 some styles can’t be added using binding syntax
  2. How to style child components from parent component’s CSS file?
  3. How and where to use ::ng-deep?
  4. Angular-cli from css to scss
  5. angular 2 ngIf and CSS transition/animation
  6. How to overwrite angular 2 material styles?
  7. Dynamic styleUrls in angular 2?
  8. The use of /deep/ and >>> in Angular 2
  9. Styling mat-select in Angular Material
  10. Angular dynamic background images
  11. Angular 2: How to style host element of the component?
  12. CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)
  13. Change style of pseudo elements in angular2
  14. Grid Styling – Overwrite style of ag-grid
  15. Dynamically updating css in Angular 2
  16. position relative in firefox [duplicate]
  17. CSS Animation property stays after animating
  18. Translate X and Y percentage values based on elements height and width?
  19. vertical-align image in div [duplicate]
  20. How to exclude the first item in a flexbox wrap?
  21. Horizontal masonry layout with flexbox CSS only [duplicate]
  22. How to combine and use multiple Next.js plugins
  23. Firefox blurs an image when scaled through external CSS or inline style.
  24. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  25. does a background-attachment of fixed work in iOS5?
  26. URLs within CSS files broken with Grails resources plugin 1.2.7
  27. -webkit-font-smoothing property has no effect in Chrome
  28. How to override stylesheets of PrimeFaces? [duplicate]
  29. How to change Bootstrap navbar collapse breakpoint
  30. How is padding-top as a percentage related to the parent’s width?

Leave a Comment