mat-form-field - Custom CSS

25,216 views
Skip to first unread message

Dib Fibo

unread,
Aug 28, 2021, 4:30:46 PM8/28/21
to angular-material2
Hi,

how to custom backgroud-color of mat-form-field?

I want add white background color, change border radius and a color border for focus state, but i cant override a default  component theme style.

Thank you!

Ramesh Gupta

unread,
Aug 30, 2021, 8:30:01 AM8/30/21
to angular-material2
Hi try to use as a prefix   ::ng-deep with your css class and make it !important. Hope this will help you

p revanth

unread,
Sep 3, 2021, 3:26:08 AM9/3/21
to angular-material2
I have selected css class and written css code in that and made !important but it is not applying my colour

Ramesh Gupta

unread,
Sep 3, 2021, 4:13:23 AM9/3/21
to p revanth, angular-material2
Hi
Go to below url 
I have added some css in its form-field-appearance-example.css file 
//
  ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: #fff;
  }
  ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
    border-radius: 4px;
    padding: 0.75em 0.75em 0 0.75em;
    border: 1px solid #f94747;
  }

save the file and you will see the changes

--
You received this message because you are subscribed to the Google Groups "angular-material2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular-materi...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular-material2/b278bed0-abde-4ae6-ab2c-c1f6051e7447n%40googlegroups.com.


--
Thanks & Regards

Ramesh Chand Gupta | Sr. Web Developer
Contact : +91 8802499748 | Skype ID : live:cid.667933194cf23a7c

Virus Positive Technologies
#Unit No. 130-131, Sector-48, Vipul Trade Center, Sohna Road, Gurgaon-122001, India

Reply all
Reply to author
Forward
0 new messages