Modifica del colore di sfondo dell'elemento ionico ionico in CSS

Question

Ho aggiunto il seguente codice style="background-color: #C2A5A5 !important. Ma questo non ha funzionato per me. come posso aggiungere il colore di sfondo all'elemento ionico? Grazie in anticipo.

<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

ionico sta iniettando un elemento all'interno del <ion-item> dando l'elemento di una struttura di:

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

L'ionico CSS contiene una proprietà CSS:

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

Il CSS in linea si è aggiunto è applicato all'elemento dietro l'elemento con lo sfondo #ffffff, quindi non è possibile visualizzare il colore di sfondo.

Applicare il colore di sfondo per l'elemento .item-content, come raccomandato @ariestiyansyah aggiungendo il seguente CSS al file CSS ionico, o creare un file CSS personalizzato e dispongono di <link> ad esso nell'intestazione, con il seguente:

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

Ecco lo working demo.

Answer 2

realtà ottenuto che funziona in modo diverso:

.item-complex .item-content { background-color: #262B32 !important; } 

come suggerito da @gylippus here in post #5

Answer 3

Una soluzione sta usando <a> tag invece di <ion-item> tag, ad esempio: il cambiamento <ion-item> per <a class="item"> e poi stile con quello che vuoi.

Fonte: http://ionicframework.com/docs/components/#item-icons

Answer 4

In Ionic3, sotto css farà il trucco.

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