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

Question

In my code (see below) I want to set the colour of placeholder i.e Username and Password and a margin below it to white.

Means the Username and password text should be of white colour and border below it should also be of white colour as i am using a dark back-ground colour.

How can I achieve that?

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%;
}

See stackBliz for more details.

Answer 1

Add this to 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;
}