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?Thanks in advance.

<ion-item class="item-remove-animate item-avatar item-icon-right" style="background-color: #C2A5A5 !important" ng-repeat="detail in details" type="item-text-wrap" ng-controller="ChatsCtrl"  ng-click="openShareModel(detail)">     <img ng-src="{{profilepic.profileimageurl}}">      <h2>{{detail.date | date :'fullDate'}}</h2>     <h2>{{detail.title}}</h2>     <p>{{detail.description}}</p>     <i class="icon ion-chevron-right icon-accessory"></i>      <ion-option-button class="button-assertive" ng-controller="ChatsCtrl" ng-click="remove(detail.id)">       Delete     </ion-option-button>    </ion-item> 

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.