如何在垫输入中设置占位符的位置

Question

我正在更改垫输入中的一些样式。除了占位符在输入中的位置，我得到了所有这些。

<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 中添加和删除了一个 class，它是 "mat-form-field-sould-float"，我的选择器将是这样的：

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

但我做不到。

如何更改？

Answer 1

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

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

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

如何在垫输入中设置占位符的位置

how to set position of placeholder in mat-input

css

angular-material

angular

angular-material-5