Angular 15中如何关闭Material Select的浮动标签？

问题描述 #

在Angular 15中尝试关闭Angular Material选择框的浮动标签，使用了以下CSS但未生效，代码已放置在全局样式文件styles.scss中：

.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label{
  display: none !important;
}

解决方案 #

针对Angular 15中mat-select的DOM结构，调整CSS选择器匹配正确的标签元素即可实现需求，以下是有效的样式规则：

/* 隐藏未选中状态下的浮动标签 */
.mat-form-field-can-float.mat-form-field-should-float .mat-select-label {
  display: none !important;
}

/* 隐藏聚焦状态下的浮动标签 */
.mat-form-field-can-float .mat-select:focus + .mat-form-field-label-wrapper .mat-select-label {
  display: none !important;
}

/* 若选择框已有值时也需隐藏标签，添加此规则 */
.mat-form-field-has-value.mat-form-field-can-float .mat-select-label {
  display: none !important;
}

说明 #

原CSS未生效的核心原因是选择器匹配的是普通输入框的标签类.mat-form-field-label，而mat-select的标签元素使用的是.mat-select-label类，针对性调整选择器后，将代码放在全局样式文件styles.scss中即可生效。

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