用于mat-input和mat-form-field的CSS问题

AJ989 发表于 Dev

AJ989

我试着做一个stackblitz，但是它没有错误地接受我的<mat-form-field>和<mat-label>标签，我导入了所需的组件，但是它不起作用。

但是，如果我在此处发布代码，也许无论如何都可以为我提供帮助，因为我不知道将<mat-label>标签移动到什么位置，<mat-form-field>而appearance="outline"当标签位于中间时使用with时，我遇到了CSS问题。的input field，我不能移动它，我希望它为中心，但它是在的底部mat-form-field。

如果我调整position:absolute值，问题是，当单击发生时，当标签超出字段上方时，也会应用这些规则，将浮动标签移动到错误的位置。

编码：

<div 
    id="test" 
    fxLayout="row" 
    fxLayoutGap="12px" 
    fxLayoutAlign="start center" 
    [class.hasFocus]="numberMatInput.value">
    <mat-form-field appearance="outline">
         <mat-label>KM</mat-label>
         <input matInput #numberMatInput [formControl]="numberInput">
    </mat-form-field>
</div>

和CSS：

#test ::ng-deep .mat-form-field-appearance-outline {
  width: 65px;
  height: 45px;
  line-height: 1.725;
}

#test ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
  padding: 0px 10px 0px 10px;
}

#test ::ng-deep .mat-form-field-infix {
  padding: 3px 0 3px 0;
}

这是想要的结果：

因此，基本上，我需要在未触摸输入字段时移动标签，并在焦点对准时将其放置在上方浮动的相同空间中。

对我来说，似乎两者都只有一条规则，所以如果我移动未改动的标签，浮动的标签也会随之移动。

有人可以帮忙吗？谢谢

kboul

尝试使用以下CSS：

#test ::ng-deep .mat-form-field-hide-placeholder .mat-form-field-label-wrapper {
   text-align: center;
   top: -25px;
}

#test ::ng-deep .mat-form-field-should-float {
   text-align: center;
}

演示版

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。