I am trying to edit a form in Ionic 4. I can target HTML elements in chrome, however when I try to use these edits in the CSS within the app, it does not work.
When I add a style to the Element using chrome, it works like shown below.
I have tried to add these properties in the style sheet such as this
ion-item.div.item-native {
background-color: blue !important;
}
div.item-native {
background-color: blue !important;
}
.item-native {
background-color: blue !important;
}
but it the result is this, which is not what I want.
How come the CSS is not working?
this is the HTML of form
<form class="form" [formGroup]="validations_form" (ngSubmit)="tryRegister(validations_form.value)">
<ion-item id ="item-native">
<ion-label id ="item-native" position="floating" color="primary">Email</ion-label>
<ion-input id ="item-native" 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" color="primary">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">Register</ion-button>
<label class="error-message">{{errorMessage}}</label>
<label class="success-message">{{successMessage}}</label>
</form>
Remove dot for div element and Stop your running code and restart it will Work...!!
Wrong CSS
ion-item.div.item-native {
background-color: blue !important;
}
Right CSS
ion-item div.item-native {
background-color: blue !important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.