everything inside mat-form-field tag is invincible in Angular CLI version 16 using the...

This is how the website looks like when i boot it up:

Whenever i click on one of the form fields this happens but i dont know how or why this happens, i did try to inspect element and still to no avail:

Here is the html code:

<h2 style="text-align: center;">Login as {{ userRole | titlecase }}</h2>
<hr>
<div class="container">
<form (ngSubmit)="login()">
<div class="form-container">
<mat-form-field>
<mat-label>Username</mat-label>
<input matInput placeholder="Enter your username" name="username" [(ngModel)]="username" required>
</mat-form-field>

<mat-form-field>
<mat-label>Password</mat-label>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" name="passWord" [(ngModel)]="passWord" required>
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
</mat-form-field>

<mat-form-field *ngIf="userRole === 'artist'">
<mat-label>Authentication Id</mat-label>
<input matInput placeholder="Authentication ID" [(ngModel)]="authentication_id" name="authentication_id" required/>
</mat-form-field>
</div>
<br>
<div class="container">
<button mat-raised-button type="submit">Log In</button>
</div>
</form>
</div>


and here is the css code:

form {
max-width: 400px; /* Set a max width for the form */
}

.form-group {
display: flex;
align-items: center;
margin-bottom: 10px; /* Add spacing between fields */
}

label {
flex: 1; /* Make the label take up one part of the row */
text-align: right; /* Align text to the right */
margin-right: 10px; /* Add spacing between label and input */
}

input {

margin-bottom: 20px;
border-color: blueviolet;
border-radius: 5px;
height: 25px;
width: 150%;
}

button {
height: 30px;
width: 100px;
background-color: chartreuse;
border-radius: 15px;
border: none;
font-weight: bold;
cursor: pointer
}

hr {
margin-bottom: 50px;
}

form {
width: 100%;
cursor: pointer;
align-items: center;
}

.form-container {
display: flex;
flex-direction: column;

.mdc-text-field {
background-color: blue !important;
}
}

.form-container > * {
width: 100%;

.mdc-text-field {
background-color: rgb(255, 255, 255) !important;
}

.mat-mdc-form-field-ripple::before {
opacity: 1 !important; /* Ensure the line is always visible */
background-color: rgba(0, 0, 0, 0.42) !important; /* Optional: Adjust color for better visibility */
}
}

.container {
width: 100%;
display: flex; /* Make it a flex container */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
}

.mat-mdc-raised-button {
background-color: rgb(0, 115, 255) !important;

.mdc-button__label {
color: white;
}

}

.mdc-text-field {
background-color: rgb(255, 255, 255) !important;
}


The Field form had initially a grey background but I changed it to a white one instead, I still can not pinpoint the styles for the other elements in the form so I can change their colours as well.

Continue reading...