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?

Sypher

you can try this answer https://mcmap.net/q/1173860/-is-it-possible-to-adjust-mat-form-field-outline-thickness for angular +15 – Toffic

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

Sosna

Thank you for your answer. The problem with this solution is that you apply the color on every state of the input: - INPUT_NOT_TOUCHED: darkorange - INPUT_FOCUSED: darkorange - INPUT_ERROR: darkorange The purpose is to have: - INPUT_NOT_TOUCHED: light-grey - INPUT_FOCUSED: darkorange - INPUT_ERROR: red – Sypher

You can change that by style for special class (of parent or children element). I have updated the example - just use CSS selectors. – Sosna