如何在Mat-Input中设置占位符的位置。

Question

我正在修改mat-input的一些样式。我已经修改了大部分，但无法调整占位符在输入框内的位置。

<mat-form-field>
   <input matInput type="email" name="email" [required]="true" placeholder="email" class="my-class"/>
</mat-form-field>

.my-class {
  padding: 10px;
  box-sizing: border-box;
}

当输入框内有电子邮件地址时，这个方法可以正常工作，但当输入框为空时，占位符“email”会移动到输入框的左上角。

通过检查 CSS，我发现 mat-form-field 类中添加和删除了一个类，“mat-form-field-sould-float”，我的选择器将类似于以下内容:

mat-form-field:not(.mat-form-field-should-float) .mat-input-placeholder

但我无法使其正常工作。

我该如何更改它？

- cucuru

Answer 1

由于视图封装，您将无法在组件样式表中更改输入框的CSS。

您需要更改项目根目录下的style.scss。您可以使用相同的选择器：

mat-form-field:not(.mat-form-field-should-float) .mat-input-placeholder {
  padding: 10px;
  box-sizing: border-box;
}

- user4676340