Change ion-item background color in Ionic 4.0

Question

Good day all

I hope no one has asked this yet... I have found some similar posts like this one, but it does not to work for Ionic 4.0. What they suggest here does not seem to work for me, as Ionic 4.0 does not seem to inject the same

<div class='item-content'></div>

element discussed in the linked post.

I am struggling to change the background color of an Ionic 4.0 ion-item element. I am trying to give it a white background whilst the app has a blue background.

I can see in the code inspector that it is applying my style, but it does not show up in the browser.

Here is a sample of my code:

<ion-item class="light-back">
  <ion-icon name="search" color="light"></ion-icon>
    <ion-input required type="text" placeholder="Search for a site" color="light">
  </ion-input>
</ion-item>


.light-back{
    background-color: #fff;
}

Below is a screenshot of what I am looking at, which shows that the element (the search bar) is receiving the style, but not implementing or showing it.

Any advice would be greatly appreciated.

Answer 1

Use this special ionic CSS rule:

ion-item{
   --ion-background-color:#fff;
}

Answer 2

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;
      }

Answer 3

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 :)