Within my Ionic application, I utilize [(ngModel)] to bind and transfer input values within my class.
<ion-item>
<ion-label color="primary" floating>flow [m <sup>3</sup> /h]</ion-label>
<ion-input type="number" [(ngModel)]="flow" (change)="calculate()"></ion-input>
</ion-item>
The issue arises when unwanted styling is applied to my input, such as the green bottom border visible in this image
To address this, I attempted to override it in my scss file:
page-fan-choice {
.ng-valid * {
border-bottom-color: #dedede;
box-shadow: none;
}
}
However, this approach proved ineffective. Upon inspecting the console, I discovered that the default styling takes precedence over mine due to its position in the hierarchy tree, as depicted below:
.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
border-bottom-color: #32db64;
box-shadow: inset 0 -1px 0 0 #32db64;
}
page-fan-choice .ng-valid * {
border-bottom-color: #dedede;
box-shadow: none;
Even attempting to use !important did not yield the desired result, as it inadvertently altered other default Ionic styles I intended to retain, like the blue bottom border upon clicking, leaving the bottom border a constant grey color (#dedede).
Is there a way to customize this ngModel styling without interfering with the existing default Ionic styles?