mat-form-field 占位符文本未对齐

Question

我的 <mat-form-field> 占位符文本（“搜索您的学校...”）在 <input> 框底部附近太低了。我怎样才能垂直提升它以便文本下方有更多间距？它应该像放大镜一样出现在 <input> 框的中间。我正在使用 Angular Material 7.

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

解决方案

检查 input 元素后，我使用以下方法在占位符的底部添加了填充：

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

Answer 1

默认情况下，mat 表单字段的 angular material 就是这样设计的。您可以使用 chrome 开发工具覆盖样式，并通过复制字段的 css 选择器并使用 CSS

使文本居中对齐

mat-form-field 占位符文本未对齐

mat-form-field placeholder text misaligned

css

angular-material

angular