css - Angular 4 Material 2 从输入控件中删除占位符上标和错误下标空间

Question

我目前正在尝试在 Material 样式表中使用 Angular Material 中的一些组件。我遇到的问题是，即使我可以 floatPlaceholder="never"和 shouldPlaceholderFloat="false"，控件上方的空间仍然被占位符占用。位于输入行下方的错误文本也是如此。

我想要一致的行高，所以不希望占用占位符空间或错误行空间。但我确实想要单击控件时突出显示下划线的行为(如果将控件移出表单字段，则不会得到这种行为。)

我怎样才能去掉或隐藏这个空间？

代码如下:

<form>

  <div style='background-color:lightblue'>

    <mat-form-field style='background-color:lightgreen' floatPlaceholder="never" shouldPlaceholderFloat="false">
      <mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <p> Selected value: {{selectedValue}} </p>
  </div>
</form>

我提供了一个plunker here .

Answer 1

这对我有用(素材版本5)

在您的组件中将 Material 类覆盖为:

.mat-form-field-infix {
    border-top: 0 solid transparent !important;
}
.mat-form-field-wrapper {
    padding-bottom: 0 !important;
}
.mat-form-field-underline {
    bottom: 0 !important;
}

并且您可能希望将 floatLabel="never" 添加到您的 mat-form-field 元素以禁止您的占位符也悬停在您的输入上方。