如何阻止浮动标签浮动？

Question

我需要这个标签停止浮动。我需要它保持静止。 输入来自 Angular Material。 https://material.angular.io/components/form-field/examples

代码如下：

电话

如果有人可以帮助我，我就是编程新手。 预先感谢。

我尝试将类放入 CSS 中，但没有一个起作用。

.mat-form-field-appearance-outline .mat-form-field-label {
    transform: translateY(-50%);
}

.mat-mdc-floating-label.mat-mdc-form-field {
    transform: none !important;
}

.mat-mdc-form-field .mat-mdc-floating-label.mat-mdc-form-field {
    transform: none !important;
}

.mat-mdc-form-field.ng-touched .mat-mdc-floating-label.mat-mdc-form-field {
    transform: none !important;
}
.mat-mdc-form-field.ng-touched .mat-mdc-floating-label.mat-mdc-form-field[ng-reflect-floating="true"] {
    transform: none !important;
}

.mat-form-field.mat-focused .mat-form-field-label {
    transform: none !important;
}

Answer 1

您可以像这样使用 floatLabel 属性：

  <mat-form-field [floatLabel]="'always'">
    <mat-label>Both a label and a placeholder</mat-label>
    <input matInput placeholder="Simple placeholder">
  </mat-form-field>

为了避免模板中重复的 floatLabel 属性，角度材料提供了 您可以在组件中注入 MAT_FORM_FIELD_DEFAULT_OPTIONS 提供程序，例如：

  providers: [
    {
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: {
        floatLabel: 'always'
      },
    }
  ],

模板：

      <mat-form-field>
        <mat-label>Both a label and a placeholder</mat-label>
        <input matInput placeholder="Simple placeholder">
      </mat-form-field>