Search code examples
cssangularformssassangular-material2

How to change size of font in angular material 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>
    </mat-form-field>
Solution

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