'mat-form-field placeholder text misaligned

My <mat-form-field> placeholder text ("Search for your school...") is too low near the bottom of the <input> box. How can I vertically raise it so there is more spacing below the text? It should appear in the middle of the <input> box like the magnifying glass. I'm using Angular Material 7.

enter image description here

HTML

 <mat-form-field style="width: 50vw; max-width: 450px; margin-top: -4px;" appearance="fill">
     <input matInput placeholder="Search for your school..." aria-label="School" [matAutocomplete]="auto" (input)="filterSchools()" #schoolInput [(ngModel)]="searchModel" (keyup.enter)="searchButton(searchModel)" name="inputField" id="searchInput" (keyup)="keyuppedSearch()">
     <mat-icon class="searchIcon" matSuffix style="color: #6336c6;" (click)="searchButton(schoolInput.value)">search</mat-icon>
 </mat-form-field>

Stackblitz: https://stackblitz.com/edit/angular-fbcxc8?file=app%2Fform-field-appearance-example.html

Solution

After inspecting the input element, I added padding to the bottom of the placeholder using:

::ng-deep .mat-form-field-flex .mat-form-field-infix .mat-input-element {
  padding-bottom: 8px;
}

enter image description here

cssangularangular-material


Solution 1:[1]

The angular material for mat form field is by default designed that way. You can override the styles using the chrome dev tools and by copying the css selector for the fields and make the text align at center using CSS

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hemanth Girimath

Related Questions