Question

下面是角形材料的形式字段。在正常情况下和浮动时如何为占位符添加2种不同的自定义字体大小。 font-size：20px; （正常时） font-size：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>

Answer 1

浮动文本是可以使用CSS定位的标签。这样的事情可能会起作用。

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

当标签浮动时

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

Answer 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) */
}

如何在浮动占位符的角材料形式字段中更改字体的大小

2 个答案: