Changing border color in mat-form-field

Question

I am using angular material mat-form-field. I have a dark background, and therefore am trying to change the border of the form-field to white. But I am not able to achieve it using css. No, matter what changes I do in the css, they are not reflecting back into the mat-form-field. Here is the link to my code:

StackBlitz link to my work

Any help would be highly appreciated. Thanks.

Answer 1

With Angular 17 you can do the following:

.foe {
  --mdc-outlined-text-field-outline-color: red;
}

<mat-form-field appearance="outline" class="foe">
 ...
</mat-form-field>

Easy Solution

Therefore the easiest way to use it would be like this:

import { Directive, HostBinding, Input } from '@angular/core';

@Directive({
  selector: '[form-field-outline]',
  standalone: true,
})
export class FormFieldOutlineDirective {
  @Input('form-field-outline') set color(value: string) {
    this.outlineColor = value;
  }
 
  @HostBinding('style.--mdc-outlined-text-field-outline-color')
  outlineColor!: string;
}

Usage

<mat-form-field appearance="outline" form-field-outline="red">
<!-- OR -->
<mat-form-field appearance="outline" [form-field-outline]="color">

Answer 2

After upgrading to Angular 15/16, this seems to work for outline "notched" style inputs, allowing default theme for focus and error states. Requires !important to override default styling without touching the theme

scss:

.mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused):not(.mdc-text-field--disabled) {
  .mdc-notched-outline > * {
    border-color: rgba(0,0,0, 0.2) !important;
  }
}

html (note appearance='outline'):

 <mat-form-field appearance="outline">
    <mat-label>bleh</mat-label>
    <input matInput type="text" formControlName="bleh" />
    <mat-error *ngIf="form.controls.bleh.hasError('required')">don't forget bleh, bruh</mat-error>
 </mat-form-field>

Answer 3

I have tried everything, but this works very well for me, both for focus, hover, and when it is neither

::ng-deep.mat-form-field-appearance-fill .mat-form-field-flex {
border-bottom: #BBB 1px solid;
background-color: transparent;}

::ng-deep.mat-form-field.mat-focused .mat-form-field-ripple {
background-color: rgb(51, 88, 155) !important;}

::ng-deep.mat-form-field:hover .mat-form-field-ripple {
background-color: rgb(51, 88, 155) !important;}

Answer 4

This is my solution.

/** form field bottom border color */
.mat-form-field-appearance-fill .mat-form-field-underline::before {
  background-color: transparent;
}

Answer 5

The Solution using CSS is so simple. I investigated the element in google developer tools. The best solution is the following code. I just wanted to change the border color in case of the input element is valid:

the following codes are for the style.css file

.ng-valid div {
    color: #009e08 !important;
 }

This solution will change the color of the text also. If you don't want to change the color of the text you can adjust the color of the text by the following CSS code:

.ng-valid div input {
  color: black !important;
}

Of course you can choose the color you want.

You can use the following to change the color of the border of the input if it is not touched before

To change the color of the thin border:

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

To change the color of the thick border that appears on hover:

.mat-form-field-appearance-outline .mat-form-field-outline-thick{
    color: #3f51b5 !important
}

however, these CSS rules, override the red color appears if the input field is not valid. To prevent this you can use the following CSS rules: For the thin border:

.mat-form-field-outline:not( .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick){
    color: black;
}

For the thick border: .mat-form-field-appearance-outline .mat-form-field-outline-thick:not( .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick){ color: #3f51b5 !important }

If you want to use these rules in the CSS file of the component, then you may need to add ::ng-deep before each rule.

Answer 6

mat-form-field elements add some classes when they change their state. For instance, when you click a text input, it adds mat-focused. You can use that, along with other selectors to change the border:

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

Answer 7

The ultimate solution for this problem is to access the _connectionContainerRef property of the MatFormField. Then, find the child elements using selector and apply the custom style. I highly recommend to use a Directive to solve this problem.

@Directive({
  selector: '[adOutlineBorder]',
})
export class OutlineBorderDirective implements AfterViewInit {
  @Input() adOutlineBorder: MatFormField;
  @Input() outlineColor: string = 'none';
  @Input() outlineRadius: number = 10;
  @Input() outlineWidth: number = 3;

  constructor() {}
  ngAfterViewInit(): void {
    const element = this.adOutlineBorder._connectionContainerRef.nativeElement.querySelector(
      '.mat-form-field-outline'
    ) as HTMLElement;
    element.style.border = `${this.outlineWidth}px solid ${this.outlineColor}`;
    element.style.borderRadius = `${this.outlineRadius}px`;
  }
}

 <mat-form-field
    #fieldRef
    [adOutlineBorder]="fieldRef"
    [outlineWidth]="3"
    [outlineColor]="'green'"
    [outlineRadius]="10"
  > </mat-form-field>

Modern web applications have lots of dynamic styles. It is not easy to apply styles through CSS because it seems Angular Material does not have a goal like that. I think focusing on CSS-IN-JS will have a huge impact on your applications because style will be more configurable which enhances user-experience to the greatest extend.

Answer 8

Add css to the global styles.scss file , it works when placed there .

I have used this css in styles.scss and it has worked for me -

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

I hope this would help others .

Answer 9

I used this method and got the answer , And that's why I share that you can use.

::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
        padding: 0 !important;
    }
    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
        padding: 0 !important;
        height: 35px;
        border: none;
    }

Answer 10

remove boder and add box-shadow :

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
        border-radius: 50% !important;
        border: none;
        border-left: none;
    }
    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
        border-radius: 1px !important;
        border: none;
        border-right: none;
    }
    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap {
        border-radius: 1px !important;
        border-bottom: none;
    }
    
    ::ng-deep.mat-form-field-appearance-outline .mat-form-field-outline {
        box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc;
        border-radius: 15px;
    }

Answer 11

HTML

<mat-form-field appearance="outline" style="margin: 0 20px;" class="border-red">
     <mat-label>Transaction Number</mat-label>
     <input matInput placeholder="Transaction number" [(ngModel)]="transactionNumber">
</mat-form-field>

SCSS

$color-outline: red;

mat-form-field {
   &.border-red {
      // to change border color
      ::ng-deep .mat-form-field-outline {
           color: $color-outline !important;
      }
      // to change label color
      ::ng-deep .mat-form-field-label {
           color: $color-outline !important;
      }
   }
}

this will work only if you give .border-red class to your mat-form-field.

If you want to apply on all mat-form-field (remove border-red style rule)

$color-outline: red;

mat-form-field {
      // to change border color
      ::ng-deep .mat-form-field-outline {
           color: $color-outline !important;
      }
      // to change label color
      ::ng-deep .mat-form-field-label {
           color: $color-outline !important;
      }
}

Answer 12

I had tried many things, finally, I am able to change the bottom line (which we are thinking is a border, which is actually not a border), using this:

::ng-deep.mat-form-field.mat-focused .mat-form-field-ripple{
    background-color: black;
}

That colored line is actually span filled with color! Hope this helps :)

Answer 13

try this , add/remove ::ng-deep if required

 ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
                border-radius: 1px !important;
                border: 1px solid  red;
                border-left:none;
              }
            ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
                border-radius: 1px !important;
                border: 1px solid red;
                border-right:none;
              }
              ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap {
                border-radius: 1px !important;
                border-bottom: 1px solid   red;
              }

Answer 14

SCSS version of @sasa with colors as variables

::ng-deep {
   $custom-main-color: red;
   $custom-label-color: rgba(0, 0, 0, .6);

   // mat-icon-stepper selected color change
   .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: $custom-main-color !important;
   }

   // input outline color
   .mat-form-field-appearance-outline .mat-form-field-outline {
      color: $custom-main-color !important;
   }

   // mat-input focused color
   .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
      color: $custom-main-color !important;
   }

   // mat-input error outline color
   .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
      color: $custom-main-color !important;
      opacity: 0.8 !important;
   }

   // mat-input caret color
   .mat-input-element {
      caret-color: $custom-main-color !important;
   }

   // mat-input error caret color
   .mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {
      caret-color: $custom-main-color !important;
   }

   // mat-label normal state style
   .mat-form-field-label {
      color: $custom-label-color !important;
   }

   // mat-label focused style
   .mat-form-field.mat-focused .mat-form-field-label {
      color: $custom-main-color !important;
   }

   // mat-label error style
   .mat-form-field.mat-form-field-invalid .mat-form-field-label {
      color: $custom-main-color !important;
   }
}

Answer 15

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

Answer 16

For the newer outlined form fields, solved it this way:

::ng-deep {
     .mat-form-field-appearance-outline .mat-form-field-outline {
        color: white;
     }
     mat-form-field {
        .mat-hint, input, ::placeholder, .mat-form-field-label {
           color: white;
        }
     }
  }

Answer 17

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.