Change ion-item background color in Ionic 4.0
Use this special ionic CSS rule:
ion-item{
--ion-background-color:#fff;
}
I seem to have found a fix. You just need to add color="light" to the ion-item element. Please see below:
<ion-item class="light-back" color="light">
<ion-icon name="search" color="light"></ion-icon>
<ion-input required type="text" placeholder="Search for a site" color="light">
</ion-input>
</ion-item>
The problem is that other code gets injected based on my theme, which I set to my primary color from my variables, so I need to indicate that I am again using light theme (which I had already set up to be #fff in my variables).
Hope this helps someone in the future :)
I found the working one in ionic 4. Apply the below 2 css in your .scss file where you have implemented ion-list and ion-item:
ion-item {
--ion-background-color: white !important;
}
.item, .list, .item-content, .item-complex {
--ion-background-color: transparent !important;
}