Change ion-item background color in Ionic 4.0

user_714713 0
Viewed 26114

Good day all

I hope no one has asked this yet... I have found some similar posts like this one, but it does not to work for Ionic 4.0. What they suggest here does not seem to work for me, as Ionic 4.0 does not seem to inject the same

<div class='item-content'></div>

element discussed in the linked post.

I am struggling to change the background color of an Ionic 4.0 ion-item element. I am trying to give it a white background whilst the app has a blue background.

I can see in the code inspector that it is applying my style, but it does not show up in the browser.

Here is a sample of my code:

<ion-item class="light-back">
  <ion-icon name="search" color="light"></ion-icon>
    <ion-input required type="text" placeholder="Search for a site" color="light">
  </ion-input>
</ion-item>


.light-back{
    background-color: #fff;
}

Below is a screenshot of what I am looking at, which shows that the element (the search bar) is receiving the style, but not implementing or showing it.

enter image description here

Any advice would be greatly appreciated.

ionic-framework sass css html
6 Answers

Use this special ionic CSS rule:

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

I found the working one in ionic 4. Apply the below 2 css in your .scss file where you have implemented ion-list and ion-item:

    ion-item {
         --ion-background-color: white !important;
    }

      .item, .list, .item-content, .item-complex {
        --ion-background-color: transparent !important;
      }
user_86680950

I seem to have found a fix. You just need to add color="light" to the ion-item element. Please see below:

<ion-item class="light-back" color="light">
  <ion-icon name="search" color="light"></ion-icon>
    <ion-input required type="text" placeholder="Search for a site" color="light">
  </ion-input>
</ion-item>

The problem is that other code gets injected based on my theme, which I set to my primary color from my variables, so I need to indicate that I am again using light theme (which I had already set up to be #fff in my variables).

Hope this helps someone in the future :)

user_7147130

None of the answers worked for me completely although @labago answer works partially.

--ion-background-color only work for static content without any padding or margin. As soon as I start applying padding it is not giving the intended results so below is the workaround I have used in my app:

ion-item {
  padding:20px;
  --ion-background-color: blue;
  background: blue; 
}
user_35438080

This works for ionic 4

1 - Open file: src/theme/variables.scss 2 - insert the code color:

  /** transparent **/
  --ion-color-transparent: #fafafa;
  --ion-color-transparent-rgb: 245, 61, 61;;
  --ion-color-transparent-contrast: #ffffff;
  --ion-color-transparent-contrast-rgb: 255, 255, 255;
  --ion-color-transparent-shade: #dcdcdc;
  --ion-color-transparent-tint: #fbfbfb;

obs: #fafafa correspont to transparent color

2 - open file global.scss e insert the code:

.ion-color-transparent {
    --ion-color-base: var(--ion-color-transparent) !important;
    --ion-color-base-rgb: var(--ion-color-transparent-rgb) !important;
    --ion-color-contrast: var(--ion-color-transparent-contrast) !important;
    --ion-color-contrast-rgb: var(--ion-color-transparent-contrast-rgb) !important;
    --ion-color-shade: var(--ion-color-transparent-shade) !important;
    --ion-color-tint: var(--ion-color-transparent-tint) !important;
}

3 - call the transparent color in ion-item

<ion-item color="transparent">

</ion-item>
user_44034420

If you want to change the background colour of multiple elements in 

 <ion-item style="--ion-background-color: rgb(206, 197, 148);">
    <ion-textarea autofocus id="textinput" type="text" value="escribe un mensaje" style="width: 90%; height: 70%;  font-family: 'Gil Sans';"></ion-textarea>
    <ion-icon name='send'></ion-icon>
</ion-item>

enter image description here

user_57646340
Related