Ion-item make background transparent

Ionic Framework
1

I am trying to have a toolbar and also ion-items transparent with the toolbar I have managed to make it transparent but from some reason with ion item is different I am using ionic 5 and I have tried some solutions for ionic 4 and 3 but with no success
can someone please help me what am I doing wrong my html is

  <ion-input  (click)="chooseOrigin()" placeholder="Where do you want to pickup?" type="text"

  value="{{origin ? origin.vicinity : '' }}"></ion-input>

  <ion-input  (click)="chooseDestination()"  placeholder="Where do you want to drop?"  type="text"

  value="{{ destination ? destination.vicinity : '' }}"></ion-input>

</ion-item>

as for the styling here is the code

.item-md {

background-color: transparent;

}

.item-ios {

background-color: transparent;

}

ion-list {

--ion-background-color: transparent !important;

--ion-border-color: transparent !important;

}

ion-item {

--background: rgba(0, 0, 0, 0);

--border-color: rgba(0, 0, 0, 0);

}

1 Like
2

Just do this ion-item { --background: transparent !important; }

1 Like
3

Hi I have already tried it and it does work thank you for your reply.

1 Like
4

Petrean, how were you able to also get the toolbar transparent? I can’t seem to get it to work.

5

You need to define this code in your scss but I have managed to do it only for toolbar that is in footer now I get it kind of different when it comes to toolbar from ion-header it is annoying but the white color with background will no dissapear.
Here is the code:

:root {
–ion-toolbar-background: transparent;
}

2 Likes
6

Thanks! That’s the current problem I have. It’s in the header and I can’t make the white color go away. :frowning: At least we can make the footer look nice!

7

welcome the even stranger thing is that I have one project in ionic 4 that I have made this even with the header but when I try to replicate to ionic 5 it doesn’t work

8

I don’t think this is a great idea, because the background of items is used subtly in many ways to facilitate the feedback of interactivity.

That being said, I would expect that if you really do insist on going down this road, you are going to have to set a bunch of the CSS variables documented here (not just --background).

9

Thank you a lot for your response I appreciate