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

I want to share my solution:

I use the custom CSS properties of ionic 4, so if I want to change the background color I can create a new class called ".item-background-color" and change the color of the CSS property that I want to modify. For example:

my-page.page.scss

.item-background-color{
    --ion-item-background:#015f01d5;
}

then, I only add my new class to the ionic item:

my-page.page.html

<ion-item class="item-background-color">
    My item with new background color
</ion-item>

What is done is to change the variable that affects the color of the ionic item, so you can add all the classes you want, dynamically or not, and change the values of their respective variables. You can find information about the variables at CSS Custom Properties

I hope my answer is helpful to people who need to modify the CSS properties of ionic 4 components, sorry for my bad english and good luck!

Answer 2

Simply, use colors in variables.scss file (you can also define new colors) like that

$colors: (
 primary:    #f9961e,
 secondary:  #882e2e,
 danger:     #f84e4e,
 light:      #f4f4f4,
 dark:       #222,
 newColor:   #000000,
);

and in your html file:

 <ion-item color='newColor'>
    Test
 </ion-item>

Answer 3

Actually got it working in a different way:

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

as suggested by @gylippus here in post #5

Answer 4

Ionic4 provides color property to give background-color

e.g.

 <ion-item color="light">
 </ion-item>

More theming property available here https://ionicframework.com/docs/theming/basics

Reference doc : https://ionicframework.com/docs/api/item

Answer 5

I created a color scheme in variable.scss

.ion-color-newcolor {
  --ion-color-base: #224068;
  --ion-color-contrast: #56b4d3;
}

Using:

<ion-item color="newcolor">
  <ion-label position="stacked">Name: </ion-label>
  <ion-input required type="text"></ion-input>
</ion-item>

Answer 6

A workaround is using <a> tag instead of <ion-item> tag, for example: change <ion-item> to <a class="item"> and then style it with whatever you want.

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