How to make ion-items transparent?

1

I am trying to make ion-items transparent by adding style: background-color: rgba(255, 255, 255, 0.1); to:

ion-content
ion-list
ion-item

to all of them, but still I see white background. How to make list items transparent?

2

Very much a CSS wimp here, but have you tried:

background-color: transparent;

2 Likes
3

Hi I am new here and I am trying the same thing.

I want to change the background color for my ion-list in side menu. adding style like background or background color doesn’t really work :frowning: how do I add a style to an ion tag? Can I handle it like a div tag with id’s and such things? I tried to change the color in the safari devtools and it worked for al lists in my app but not for the side menu.

4

I found the solution in another forum post

My solution is
.my-menu {
background-color: #3f4041;
}

.my-menu .item, .my-menu .item-content, .my-menu .item-complex{
background-color: rgba(0,0,0,0);
color: #FFFFFF;
}

I add the class my-menu to ion-content in my side menu.

I don’t know if it’s a good way but it worked for my…I am open to better solutions =)

2 Likes
5

did you know, what exactly .item, .item-content and .item-complex are using for?

6

I use a CSS class to make the job, something like this inside your content:

<ion-item class="item item-trns text-center">
      I'm transparent!
</ion-item>

And this on your style.css

.item.item-trns {
	border-color: rgba(0, 0, 0, 0);
	background-color: rgba(0, 0, 0, 0);
	color: white; 
}

The result:

7 Likes
7

Thanks. @swfideas Itworked for me. I had the same problem and wanted something like that. It is an encouragement for us novices in development and in Web frameworks using Ionic.

8

it works , thank you

9

Thanks!! Its Work!!:muscle:

10

The following worked for me in ionic 4

<ion-item color="transparent">

</ion-item>
7 Likes
11

this changes the color of the text how would it work

12

Here is a solution in Ionic 4:

HTML:

<ion-list class="bg-transparent">
    <ion-item color="none" lines="none">
        Some random text
    </ion-item>
    <ion-item color="none" lines="none">
        Some random text
    </ion-item>
</ion-list>

CSS:

.bg-transparent {
  background: transparent;
}

Important things to note:

  • Set background color of the main list to transparent by applying the class and adding CSS as shown.
  • Add the color="none" attribute to each of the ion-item.
  • lines="none" remove the lines under each of the ion-item

That should do it!

3 Likes
13

try this…
–background: transparent;
it’ll work.
refer this for reference.https://ioncheatsheet.com/

14

This doesn’t work in Ionic/Vue 5. :slightly_frowning_face: