如何使用 Angular material 更改 matInput 字段的占位符和输入字段的颜色

Question

在我的代码中（见下文）我想将占位符的颜色设置为 white.

表示用户名和密码文本应为白色，其下方的边框也应为白色，因为我使用的是深色背景。

我怎样才能做到这一点？

Html

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

CSS

.example-container {
  display: flex;
  flex-direction: column;
}

.login {
    margin-top: 80px;
    height: 450px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    background-color: #274c7c
}
.material-icons {  
    margin-left: 2%;
    margin-bottom: 10px;
}
.otp-btn {
    margin: 30px 30px 30px 30px;
    margin-left: 10%;
    width: 80%;
    font-size:30px; 
    height: 55px;
    color:white;
    border-radius: 10px;
    background-color: #f6b319;
}

:host {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
img {
    height: 16%;
    width: 174px;
    margin-left: 15%;
    margin-right: auto;
    padding: 10px;
}
div.input {
    position: relative;
}
.form {
    display: block; 
    position: relative;
    flex: auto;
    min-width: 0;
    width: 245px !important;
    margin-left:15px;
}
.inputField
{
    width: 90%;
    font-size: 20px;

}
div.input label {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    left: 10px;
    background: white;
    padding: 5px 2px;
    color: white;
}

div.input input {
    padding: 10px 20px;
    font-size: 25px;
    outline: 0;
    color: white;
}

div.input {
    margin-top: 20px;
    color: white;
}


.example-container > * {
  width: 100%;
}

有关详细信息，请参阅 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 material 更改 matInput 字段的占位符和输入字段的颜色

How to change the colour of placeholder and input field of matInput field using of Angular material

css

angular-material

property-placeholder

angular