css 如何改变浮动保持器的角形物料表单字段的字体大小

d5vmydt9  于 2022-11-26  发布在  其他
关注(0)|答案(4)|浏览(111)

下面是角材料的表单字段。我如何添加2个不同的自定义字体大小的占位符时,它是正常的,当它浮动。字体大小:20 px;(正常时)字体大小:13 px;(当它浮起并变小时)

<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>
eoigrqb6

eoigrqb61#

浮动文本是一个标签,可以用css作为目标。类似这样的东西可能会起作用。

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

当标签浮动时

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

fkvaft9z2#

前面的答案不再起作用,下面是我是如何做到的:

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

mqxuamgl3#

这个解决方案对我很有效,你可以试试这个:

HTML格式

<div>
    <mat-form-field>
        <mat-label>Email Address</mat-label>
        <input matInput placeholder="Ex. example@example.com">
    </mat-form-field>
</div>

**S CSS **

.mat-form-field{
    font-size: 17px;
    width: 280px;
    &.mat-focused{
        font-size: 20px;
    }
    .mat-input-element{
        width: 100%;
        font-size: 14px;
    }
    &::placeholder{
        font-size: 14px;
    }
 }

.mat-form-field-should-float {    
  font-size: 20px;
}
dldeef67

dldeef674#

表单字段**(自v5起)**的官方角材料文档建议更改字体大小,如下所示:
mat-form-field从其父元素继承了font-size。可以使用CSS将其重写为显式大小。我们建议至少使用1个元素+ 1个类的特性。

mat-form-field.mat-form-field {
  font-size: 16px;
}

同样的方法可以更改表单字段中的标签:

mat-label.mat-label {
      font-size: 16px;
    }

然而,如果你想让你的样式更易读,你可以使用simple css class来应用新的字体属性:

.html

`<mat-form-field class="new-form-theming">..`.

.css

.new-form-theming {
   font-size: 24px;
   line-height: 28px;
   font-weight: 500;
 }

相关问题