Question

在我的代码中（请参见下文），我想将占位符的颜色设置为“用户名”和“密码”，并将其下方的空白设置为 white 。

意味着用户名和密码文本应为白色，并且在其下方的边框也应为白色，因为我使用的是深色背景。

我该如何实现？

HTML

Etc/GMT

CSS

<mat-card class="login">
<form >
    <mat-form-field color="accent" autocomplete="off" class="form">
            <input class="inputField" maxlength="10" matInput [placeholder][1]="Enter Username" [formControl]="">
    </mat-form-field>
    <br>
    <mat-form-field color="accent" autocomplete="off" class="form">
                <input class="inputField" maxlength="10" type="password" matInput placeholder="Enter Password" [formControl]="">
    </mat-form-field>
    <div>
            <button mat-button class="otp-btn" type="submit">Login</button>
  </div>
  <br>
</form>
</mat-card>

有关更多详细信息，请参见stackBliz。

Answer 1

将此添加到CSS

    ::ng-deep .mat-form-field-underline, ::ng-deep .mat-form-field-ripple {
  background-color: white !important;
  color: white !important
}

::ng-deep .mat-form-field-empty.mat-form-field-label {
    color: white;
}

Answer 2

在专注于输入之后，您可以在动画之后插入以下代码以样式化占位符：

::ng-deep .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    color: beige;
    font-family: lobster;
}

如何使用Angular材质更改占位符的颜色和matInput域的输入域

2 个答案: