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

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 2

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.

Answer 3

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 4

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 5

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 6

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 7

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 8

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 9

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 .