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

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.

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



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.