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

Question

我尝试了StackBlitz，但它不能正确显示<mat-form-field>和<mat-label>标签，我已经导入了需要的组件，但还是无法正常工作。

如果我在这里发布代码，也许你能帮我解决问题。我的问题在于CSS方面，因为我不知道如何定位<mat-label>标签，当使用一个<mat-form-field>并设置appearance="outline"时，当标签在中心、覆盖着输入框时，我无法将其移动到中心位置，而只能放置在下方。

如果我调整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;
}

这是期望的结果：

基本上当输入框没有被操作时，我需要移动标签，并在输入框获得焦点时让其停留在同一位置浮动在上方。

对我来说，看起来这两个状态只需要一个规则，所以如果我移动未被操作的标签，则浮动的标签也会移动。

有人能帮忙吗？谢谢。

- AJ989

---

.mat-form-field-appearance-outline 这个类似乎不存在？ - user184994

它存在，它提供了mat-form-field的宽度和高度，这些类直接来自Chrome开发工具，并且它们在我的CSS中起作用。 - AJ-

Answer 1

尝试使用以下 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;
}

演示

- kboul

---

干得好@kboul，无论如何谢谢。 - harkesh kumar

非常感谢！在你发帖之前的一分钟，我已经找到了一个解决方案，但是你的方法看起来更加简洁！我滥用了 !important 并且针对了三个实例（内部标签、上方标签和输入不为空的上方标签）。因为我进行了一些更改，将浮动标签从中心移到了左上角，你能否帮助我将你的解决方案应用到当前的样式中？https://stackblitz.com/edit/angular-chtqjk-2qmksf - AJ-

我已经在你的 Stackblitz 中添加了一条规则，使得浮动标签的空白处于左侧而不是居中，但现在我不能将浮动标签放置在相同的位置，你能否检查一下？链接：https://stackblitz.com/edit/angular-chtqjk-szexuh - AJ-

如果您将HTML居中，那么浮动效果也不应该在中心吗？这只是个人喜好的问题，但在中心看起来很漂亮。 - kboul

我认为我更喜欢标签在侧边！如果将浮动标签推到侧边不太复杂的话，那就这样做吧，无论如何非常感谢您的帮助！ - AJ-