Changing Background Color of Ionic Ion-Item in CSS

Changing background color of Ionic ion-item in CSS

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.

Change ion-item background color in Ionic 4.0

Use this special ionic CSS rule:

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

Change background color of ion-item on click

See the official documentation here (look at "using Css" or "javascript") : https://ionicframework.com/docs/theming/css-variables#ionic-variables

What you are looking for is changing this variable in your theming (or custom css)

--background-activated :    Background of the button when activated

Like :

.fancy-button {
   --background-activated: red;
}

I would not go for an angular solution if you only want to change the color of it. It's a Style related issue and as such you should solve it with the solutions provided by ionic for this specific usecase. Doing otherwise's only going to make you code more heavy to read and less performant.
But if you want to apply multiple class to you component after it's been clicked, then you need to use [ngClass]

Ionic 4 update ion-item background programmatically

Set the background of item and the item-native class to transparent using css4 variable; and then set the background style of the ion-item using [ngStyle] depending on the boolean value returned. Example below

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

.item .item-native {
   --background: transparent !important;
}

Then the HTML will look thus:

<ion-item [ngStyle]="{'background':(true)?'#32db64':'#f53d3d'}">
  <ion-label class="ion-text-center">{{variable}}</ion-label>
</ion-item>

Changing background color of Ionic list item on hover in CSS

Using the href attribute on the ion-item will generate the following HTML (stripped some attributes for clarity):

<ion-item href="#/newpage">
  <a ng-href="#/newpage" target="_self" href="#/newpage">
    <div class="ng-binding">Something</div>
  </a>
</ion-item>

You need to change the background color for the a element:

ion-item.item:hover a {
  background-color: slategray;
}

Note that the .item part is used to give the selector higher specificity. Otherwise the default background color for .item would be used instead.

Could also be solved with !important, but I prefer the former:

ion-item:hover a {
  background-color: slategray !important;
}

To style the border is trickier since the list elements have various margins depending on the position in the list (first, last or other). It's possible to counter this but it would push the adjacent elements 1px when one is hovered. Might be possible to solve this as well but it would probably require a bunch of new CSS.

An alternative solution is to use an inset box-shadow instead:

ion-item.item:hover a {
  background-color: slategray;
  box-shadow: inset 0px 0px 0px 1px red;
}

Demo: http://plnkr.co/edit/TCRbWhIQ6xJRx2qrgExs?p=preview

---

Related Topics