How to add border color in Mat Input Field in Angular

Question

Is there any way by which we can add border color in mat input field in Angular , by default it comes with no border and when we hover over it it gets a border black .

Can we change the default behaviour to black border ? I am unable to do that by any css .

I used this -

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

Add `::ng-deep` and it should work – JSON Derulo Feb 10 '21 at 09:41 — JSON Derulo, Feb 10 '21 at 09:41

Dako patel · Accepted Answer · 2021-02-10T11:43:03.850

1

Please write this css at the end of style.css file

if you have added this css on Component.css then it will not work

if it still not works then try with !important

hope it will usefull for all

Reason

any css file or scss will apply last value of that styles

EXAMPLE

  .CLASS {
     font-size : 20px;
    }

 .CLASS {
     font-size : 10px;
  }

So it will encounter font-size : 10px;

edited Feb 10 '21 at 11:43

answered Feb 10 '21 at 09:42

Dako patel

760
4
13

Using `!important` is highly discouraged!! – Benny Halperin Feb 10 '21 at 10:24
Hey , @dako , it worked , I added the css to the styles.scss and it worked , Thanks man . But what's the reason behind it ? Why does it not work in Component level css ? – angular_code Feb 10 '21 at 10:26
@AnandSrivastava please check updated answer – Dako patel Feb 10 '21 at 11:43
1

Thank you @DakoPatel , Learnt something new today – angular_code Feb 11 '21 at 04:59

How to add border color in Mat Input Field in Angular

1 Answers1