How do I make a similar style like this to my ion-lists/items that contain an input?
I did that and the bottom border of the list seemed to disapear. Where can I set the light and dark mode list background colours like the image above? (I would like the style to be applied globally)
I did that and the bottom border of the list seemed to disapear
This is by design. Notice in your screenshot that the inset list there does not have a bottom border on the last item either.
The Dark Mode Docs may come in handy here. ion-list does not have a dark mode setting because it takes on the color of the item. You can use --ion-item-background to customize the background color of the items in the list.
1 Like
Thank you! That worked. How can I change the inset border radius?
You can set border-radius on ion-list:
ion-list {
border-radius: 8px;
}
(You may need to add a class to ion-list to increase the specificity)
Also, Ionic 6 will be updating the inset list border radius to better match the screenshot provided in this thread.
1 Like
Thank you so much! Additionally, when setting [inset] = "true" the lines style is similar to full, ie. the border length spans the whole width but I prefer the default lines style which is that the left side does not touch the edge. How do I reproduce that?