如何在边框角材料上修复垫标签

如何解决如何在边框角材料上修复垫标签

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

我的style.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

解决方法

我不确定是否了解所有内容，但如果您希望标签始终位于 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"。