Changing background color of Ionic ion-item in CSS

Question

I have added the following code style=\"background-color: #C2A5A5 !important. But that has not worked for me. how can I add background color to ion-item?Thank

Answer 1

Ionic is injecting an element inside the <ion-item> giving the element a structure of:

<ion-item>
  <div class="item-content">
  </div>
</ion-item>

The Ionic CSS contains a CSS property:

.item-content {
  background-color:#ffffff;
}

The inline CSS you added is being applied to the element behind the element with the #ffffff background, so you can't see your background color.

Apply the background color to the .item-content element, as @ariestiyansyah recommended by adding the following CSS to the Ionic CSS file, or create a custom CSS file and include a <link> to it in the header, with the following:

.item .item-content {
  background-color: transparent !important;
}

Here's the working demo.

Answer 2

In Ionic3, below css will do the trick.

.item-ios {
background-color: transparent !important;
}

Answer 3

Now you can use the appStyleProperty property of ion-item this way:

<ion-item
  [appStyleProperty]="{ background: someColor }"
>
</ion-item>

Answer 4

<ion-item>
  <div class="item-content">
  </div>
</ion-item>
The Ionic CSS contains a CSS property:
.item .item-content {
background-color: transparent !important;
}   

its apply on child dom of <ion-item>. We can use can use div class='item-content', but if we won't all the css(.item-content) property would apply to the <ion-item> child elements like if we use

<ion-item>
   Something   //all css will apply into it 
</ion-item>
.item .item-content {
background-color: transparent !important;
}

I'm not able to comment that's why I am writing over here.