Adjust height of <mat-form-field> in Angular 17

[Saurav Chandra]

I am using Angular 17 with Angular Material 17.2.2. I want to adjust the height of tag to make it smaller. I am able to resize the tag but not able to resize the placeholder inside.

I have tried adjusting the height and its working but the placeholder is not resizing

<mat-form-field appearance="outline" style="height: 40px; padding-top: 10px;"> <input matInput placeholder="Enter name"> </mat-form-field>

[Ramesh Gupta]

Hi  saurav,

First of all find the class of mat input filed by inspecting it. and then in your CSS apply same class with prefix of ::ng-deep 

e.g 

::ng-deep .classname {

// your style 

height: 40px; 

padding-top: 10px;

}

Hope it will help you

[Sidof Dountio]

Hi..

you can just apply you CSS properties  on mat-form-field tag.