How to change size of font in angular materiel form fields of floating place holder


Below is the form field of angular material.
How can I add 2 different customize font-size for placeholder when it’s normal and when it floats.
font-size : 20px; (When it is normal)
font-size : 13px; (When it floats up and get smaller)

 <mat-form-field class="form-group example-full-width">
    <input matInput id="Fname" placeholder="First" class=" " formControlName="FirstName">
    <mat-error *ngIf="firstName.invalid" class="">First name is required</mat-error>


The floating text is a label that can be targeted with css. Something like this may work.

mat-form-field label {
  font-size: 20px;

And when the label is floated

mat-form-field.mat-form-field-should-float label {
  font-size: 13px;

Answered By – Flignats

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.