How to remove item-inner border in ionic - ionic4

Question

<ion-item color="transparent" padding="0px">
<ion-input type="email" placeholder="username"></ion-input>
</ion-item>
<ion-item color="transparent" padding="0px" no-lines>
<ion-input id="password" type="password" placeholder="Password"></ion-input>
<ion-icon name="albums"></ion-icon>
</ion-item>
I'm creating a login form in ionic. But I have a problem that I want to a bottom white border in item-inner. My CSS is not working, Plz if you have any suggestions give me.....Thanks

Answer 1

The following is my solution, not sure whether it is work for all the cases, but at least for my project it is working.
SOLUTION: add lines="none" to the ion-item tag.
<ion-item style="--background: transparent;" lines="none">
<ion-avatar style="width: 60px;height: 60px;" slot="end" >
<ion-img [src]="displayProfilePic" style="width: 100%" ></ion-img>
</ion-avatar>
</ion-item>
REFERENCE: https://ionicframework.com/docs/api/list
NOTE: It also working for ion-list.

Answer 2

try this
<ion-item lines="none" class="remove_inner_bottom"> //here is the border bottom removal code
<ion-label>
No Lines Item
</ion-label>
</ion-item>
The above code does not have border bottom
inside your css
.remove_inner_bottom{
--inner-border-width: 0; // this removes the inner border width
}
Please find the link for applying sass for ion-item

Answer 3

Try it:
<ion-list lines="none">
<ion-item color="transparent" padding="0px">
<ion-input type="email" placeholder="username"></ion-input>
</ion-item>
<ion-item color="transparent" padding="0px" no-lines>
<ion-input id="password" type="password" placeholder="Password"></ion-input>
<ion-icon name="albums"></ion-icon>
</ion-item>
</ion-list>
OR
.item-inner{
border-style: unset !important;
}