mat-form-field outline border color

Question

It looks like the border color of mat-form-field has been updated

• The v15 is black
• The v12 is grey

Is it possible to add an option to change the based color?

Answer 1

The border of mat-form-field is created by block .mdc-notched-outline. You can set border to this, but it overlaps the old border this may cause an strikethrough label when typing.

Using DevTools, you can see they are using 3 element inside this block: __leading, __notch and __trailing. By change the border-color attribute of them:

::ng-deep .mdc-notched-outline__leading {
  border-color: darkorange !important;
}
::ng-deep .mdc-notched-outline__notch {
  border-color: darkorange !important;
}
::ng-deep .mdc-notched-outline__trailing {
  border-color: darkorange !important;
}

Now mat-form-field has darkorange border color. You can also change the border-radius to your form:

...
::ng-deep .mdc-notched-outline__trailing {
  border-color: darkorange !important;
  border-top-right-radius: 100px !important;
  border-bottom-right-radius: 100px !important;
}

This is Stackblitz Demo.

---

Update: because the block has no other element, we can shorten by:

::ng-deep .mdc-notched-outline > * {
  border-color: darkorange !important;
}

---

Update 2: You can also apply color depend on status of input field by:

• For INPUT_NOT_TOUCHED:

::ng-deep .mdc-notched-outline > * {
  border-color: green !important;
}

• For INPUT_FOCUSED:

::ng-deep .mdc-text-field--focused .mdc-notched-outline > * {
  border-color: darkorange !important;
}

• For INPUT_ERROR:

::ng-deep .mdc-text-field--invalid .mdc-notched-outline > * {
  border-color: cyan !important;
}