Changing Border Color in Mat-Form-Field

Changing border color in mat-form-field

Add this CSS to your form-field-appearance-example.css:

/* Border */
.mat-form-field-appearance-outline .mat-form-field-outline {
  color: white;
}
/* Font color */
input.mat-input-element {
  color: white;
}

Though, there is still a problem while the field is focused.

How to set the focused border line color for mat-form-field

If you want to change this color strategy for all controls then you should visit https://material.angular.io/guide/theming. You can also make custom theme with your own colors.

In case you want for a specific control, you can do with below css

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  color: red;
}

Changing Angular Mat Input Border Bottom Color

I got the answer for this .

We should add the styles in the global styles.scss file to override the changes of mat input field styles .

I placed this in styles.scss and it worked -

.mat-form-field-appearance-outline .mat-form-field-outline { color: black; }

How to add border color in Mat Input Field in Angular

Please write this css at the end of style.css file

if you have added this css on Component.css then it will not work

if it still not works then try with !important

hope it will usefull for all

Reason

any css file or scss will apply last value of that styles

EXAMPLE

  .CLASS {
     font-size : 20px;
    }

 .CLASS {
     font-size : 10px;
  }

So it will encounter font-size : 10px;

Change (Increase) Border Radius of Mat-Form-Field

You need to increase the min-width of the left outline and apply border radius to only the left or right side.

::ng-deep .mat-form-field-outline-start {
  border-radius: 28px 0 0 28px !important;
  min-width: 28px !important;
}

::ng-deep .mat-form-field-outline-end {
  border-radius: 0 28px 28px 0 !important;
}

https://stackblitz.com/edit/angular-9-material-starter-flnoeq?file=src/app/app.component.css

Changing Border Color in Mat-Form-Field