如何使mat-select文本始终固定在组件边框位置？

方法1：利用Angular Material原生属性（推荐） #

Angular Material的mat-form-field自带floatLabel属性，设置为always可强制标签始终固定在组件边框顶部，无需自定义CSS。同时搭配mat-select的placeholder属性，实现未选中时的提示效果：

修改后的组件代码：

<mat-form-field appearance="outline" floatLabel="always">
  <mat-label>Age</mat-label>
  <mat-select placeholder="Select your age" required>
     <mat-option *ngFor="let age of ages" [value]="age">{{age}}</mat-option>
  </mat-select>
</mat-form-field>

• floatLabel="always"：让标签始终停留在outline边框顶部，不受控件聚焦状态或选中值影响。
• placeholder="Select your age"：未选中任何选项时，下拉框内显示占位提示文本。

方法2：自定义CSS强制覆盖样式 #

若原生属性无法满足需求，可通过自定义CSS修改标签的默认行为：

在组件的CSS文件中添加以下样式：

/* 强制标签保持浮动状态 */
.mat-form-field-appearance-outline.mat-form-field:not(.mat-form-field-should-float) .mat-form-field-label {
  transform: translateY(-1.25em) scale(0.75);
  width: 133.33333%;
}

/* 调整标签在边框内的位置 */
.mat-form-field-appearance-outline .mat-form-field-label {
  top: 1.875em;
  margin-top: -0.5em;
}

此方式会覆盖Angular Material的默认标签浮动逻辑，确保标签始终固定在边框顶部。注意需保证自定义样式优先级足够（如使用组件宿主选择器），避免被默认样式覆盖。

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