Ion-item make background transparent

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 post - 1 participant

Read full topic