如何更改浮动占位符的角材料表单字段中的字体大小答案

【问题标题】：How to change size of font in angular materiel form fields of floating place holder如何更改浮动占位符的角材料表单字段中的字体大小
【发布时间】：2019-02-17 08:07:43
【问题描述】：

下面是角材料的表单域。如何在占位符正常和浮动时为占位符添加 2 种不同的自定义字体大小。字体大小：20px；（正常时）字体大小：13px；（当它浮起来变小的时候）

 <mat-form-field class="form-group example-full-width">
    <input matInput id="Fname" placeholder="First" class=" " formControlName="FirstName">
    <mat-error *ngIf="firstName.invalid" class="">First name is required</mat-error>
    </mat-form-field>

【问题讨论】：

标签： css angular forms sass angular-material2

【解决方案1】：

浮动文本是一个可以用css定位的标签。这样的事情可能会奏效。

mat-form-field label {
  font-size: 20px;
}

当标签浮动时

mat-form-field.mat-form-field-should-float label {
  font-size: 13px;
}

【讨论】：

非常感谢，@Flignats，我到处跑。
这适用于最新版本的 Angular 吗？使用 Angular 和 Angular Material 10。似乎不起作用。

【解决方案2】：

以前的答案不再有效，这是我的做法：

.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 {
  transform: translateY(-1.34375em) scale(1) !important; /* originally scale(0.75) */
}

【讨论】：