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

user_6693879 0
Viewed 15047

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>
angular-material2 angular sass forms css
3 Answers

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

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) */
}
user_43916920

This solution works for me, you could try this:

HTML

<div>
    <mat-form-field>
        <mat-label>Email Address</mat-label>
        <input matInput placeholder="Ex. example@example.com">
    </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;
}
user_184725480
Related