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

Question

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>

Gambrel

Answer 1

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

Poop

Thanks a lot, @Flignats, I was running all over the place. – Gambrel

Does this work on recent versions of Angular? Using Angular and Angular Material 10. Doesn't seem to work. – Agha

See my answer below for an up to date version. – Enlighten

Answer 2

The previous answer no longer works, here is how I did it :

.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
  transform: translateY(-1.34375em) scale(1) !important; /* originally scale(0.75) */
}

Enlighten

This is the way to go, but you'll also need to add: margin-top: 0 !important; – Renitarenitent

Answer 3

This solution works for me, you could try this:

HTML

<div>
    <mat-form-field>
        <mat-label>Email Address</mat-label>
        <input matInput placeholder="Ex. [email protected]">
    </mat-form-field>
</div>

SCSS

.mat-form-field{
    font-size: 17px;
    width: 280px;
    &.mat-focused{
        font-size: 20px;
    }
    .mat-input-element{
        width: 100%;
        font-size: 14px;
    }
    &::placeholder{
        font-size: 14px;
    }
 }

.mat-form-field-should-float {    
  font-size: 20px;
}

Cottony

Answer 4

Official Angular Material documentation for Form Field (since v5) has a recommendation for changing the font size as it follows:

mat-form-field inherits its font-size from its parent element. This can be overridden to an explicit size using CSS. We recommend a specificity of at least 1 element + 1 class.

mat-form-field.mat-form-field {
  font-size: 16px;
}

The same way may be changed label in form field:

  mat-label.mat-label {
      font-size: 16px;
    }

Nevertheless, if you want to keep your styles more readable, you can use simple css class to apply new font properties:

.html

`<mat-form-field class="new-form-theming">..`.

.css

.new-form-theming {
   font-size: 24px;
   line-height: 28px;
   font-weight: 500;
 }

Hargrave