CODEWITHSUNDEEP
angular
angular_code
angular_code

Reputation: 359

Changing Angular Mat Input Border Bottom Color

i have used material input with the following code -

<mat-form-field appearance="fill">
              <mat-label>Example</mat-label>
              <input matInput autocomplete="off">
            </mat-form-field>

I want that the border bottom of the field should be thick black in color , which happends when we hover over it . I want that to be the default behaviour . I tried few things but that didnt work . Does any one has idea how to achieve that ?

Upvotes: 1

Views: 1664

Answers (2)

Anand Srivastava
Anand Srivastava

Reputation: 71

We can use :: ngdeep too for this . It helps in changing/overrriding the existing styles for that element .

for eg -

   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-infix {
    width: 300px !important;
  background-color: #f4f5f7 !important;
  margin-top: 1% !important;
  padding-top: 0.18em;
}

Upvotes: 1

angular_code
angular_code

Reputation: 359

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

Upvotes: 1

Related Questions