Having trouble editing a Validations Form in Ionic 4 with CSS. It seems that only the form elements are targeted after clicking on the form group.
Attached below are the form states before and after click. I'm unable to style the form elements before they're clicked on.
Before Click https://i.stack.imgur.com/aYrMQ.png
After Click https://i.stack.imgur.com/TkaQw.png
Form.html
<ion-content padding class="form-content">
<form class="form" \[formGroup\]="validations_form" (ngSubmit)="tryLogin(validations_form.value)">
<ion-item class="item item-trns text-center">
<ion-label position="floating" >Email</ion-label>
<ion-input type="text" formControlName="email"></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.email">
<div class="error-message" *ngIf="validations_form.get('email').hasError(validation.type) && (validations_form.get('email').dirty || validations_form.get('email').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating" >Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.password">
<div class="error-message" *ngIf="validations_form.get('password').hasError(validation.type) && (validations_form.get('password').dirty || validations_form.get('password').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
<ion-button class="submit-btn" expand="block" type="submit" \[disabled\]="!validations_form.valid">Log In</ion-button>
<label class="error-message">{{errorMessage}}</label>
</form>
Form.css
form {
margin-top: 99%;
}
.item.item-trns {
border-color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0);
color: orange;
}