如何阻止Angular Material的浮动标签（floating-label）浮动？

我使用Angular Material的输入组件，想要让它的浮动标签停止浮动，始终保持固定状态。我是编程新手，尝试了以下几个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;
}

解决方法 #

1. 直接通过CSS强制固定标签位置

从你的代码看，你用的是Angular Material的MDC版本（.mat-mdc-*类），可以通过穿透组件样式来覆盖浮动逻辑：

/* 穿透组件封装，确保样式生效 */
:host ::ng-deep .mat-mdc-form-field .mat-mdc-floating-label {
    /* 固定标签到输入框上方的默认浮动位置 */
    transform: translateY(-1.5em) scale(0.75) !important;
    top: 0 !important;
    left: 0.75em !important;
}

/* 覆盖聚焦、触摸等状态下的浮动触发样式 */
:host ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-floating-label,
:host ::ng-deep .mat-mdc-form-field.ng-touched .mat-mdc-floating-label,
:host ::ng-deep .mat-mdc-form-field.ng-dirty .mat-mdc-floating-label {
    transform: translateY(-1.5em) scale(0.75) !important;
}

可以根据你使用的表单外观（比如outline或fill）调整translateY和scale的数值，让标签位置更贴合需求。

2. 通过组件属性关闭浮动行为

更简单的方式是直接利用Angular Material组件自带的属性，彻底关闭浮动逻辑：

<mat-form-field appearance="outline">
  <mat-label>Phone</mat-label>
  <input matInput floatLabel="never">
</mat-form-field>

设置floatLabel="never"后，标签会固定显示在输入框上方，不会随输入状态变化浮动。如果需要占位符，可以同时添加placeholder属性。

内容的提问来源于stack exchange，提问作者oglez