如何在边框角材料上修复 Mat-label答案

【问题标题】：How to fix Mat-label on border angular material如何在边框角材料上修复 Mat-label
【发布时间】：2021-04-13 13:46:49
【问题描述】：

我正在尝试使用 Angular 材料创建多选项选择输入。我想在输入字段的边框上修复<mat-label>，但是现在当我单击输入字段时，它正在移动到边框。如何在输入边框上修复这个<mat-label>

我的样式.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

.mat-select-panel {
  position: absolute;
  top: 32px;
  left: 4px;
  min-width: calc(100% + 22px) !important;
  border-radius: 0px !important;
  border: 1px solid rgb(31, 30, 30);
  border-top-style: none;
}

.mat-form-field-appearance-outline .mat-form-field-outline-start {
  border-radius: 0px !important;
  border: 1px solid rgb(43, 41, 41) !important;
  border-right-style: none !important;
}

.mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 0px !important;
  border: 1px solid rgb(56, 55, 55) !important;
  border-left-style: none !important;
}

.mat-select-panel ng-animating {
  visibility: hidden;
}

我的 StackBlitz 链接 -> https://stackblitz.com/edit/angular-matselect-style-ddggww?file=src/styles.css

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

我不确定是否理解所有内容，但如果您希望标签始终位于 mat-form-field 的顶部边框“内部”，您需要将 floatLabel="always" 传递给您的 mat-form-field。像这样：

    <mat-form-field appearance="outline" floatLabel="always">
        <mat-label> test </mat-label>
        <mat-select placeholder="Favorite food">
            <mat-option *ngFor="let food of foods" [value]="food.value">
                {{food.viewValue}}
            </mat-option>
        </mat-select>
    </mat-form-field>

如果您希望此行为成为默认行为，您可以（如 doc 中所述）将此添加到应用程序的根模块中。：

@NgModule({
  providers: [
    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {floatLabel: 'always'}}
  ]
})

并且您不再需要传递floatLabel="always"。

【讨论】：