如何在mat-input中设置占位符的位置答案

【问题标题】：how to set position of placeholder in mat-input如何在mat-input中设置占位符的位置
【发布时间】：2018-11-13 10:35:32
【问题描述】：

我正在更改我的 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;
}

当输入中有一封电子邮件时，这可以正常工作，但是当它为空时，占位符“电子邮件”会在输入中移动并位于顶角。

通过检查 css，我发现在 mat-form-field 中添加和删除了一个类，它是“mat-form-field-sould-float”，我的选择器将类似于：

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

但我无法让它工作。

我怎样才能改变它？

【问题讨论】：

标签： angular css angular-material angular-material-5

【解决方案1】：

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

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

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

【讨论】：