Изменение цвета фона ионного элемента в CSS

Я добавил следующий код style="background-color: #C2A5A5 !important. Но это не сработало для меня. как я могу добавить цвет фона в ионный элемент? Спасибо заранее.

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

Ответы

Ответ 1

Ionic вводит элемент внутри <ion-item>, предоставляя элементу структуру:

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

Ионный CSS содержит свойство CSS:

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

Добавленный встроенный CSS применяется к элементу, расположенному за элементом с фоном #ffffff, поэтому вы не можете видеть свой цвет фона.

Примените цвет фона к элементу .item-content, так как @ariestiyansyah рекомендуется, добавив следующий CSS в файл Ionic CSS или создав собственный CSS файл и включив в него заголовок <link> со следующим

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

Здесь рабочая демонстрация.

Ответ 2

Фактически он работал по-другому:

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

как было предложено @gylippus здесь, в сообщении # 5

Ответ 3

В обходном методе используется тег <a> вместо тега <ion-item>, например: change <ion-item> to <a class="item">, а затем стирайте его с помощью того, что вы хотите.

Источник: http://ionicframework.com/docs/components/#item-icons

Ответ 4

В Ionic3, ниже css сделает трюк.

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