Mobile List group selected list value background color.

Hi All,



I am using list-group Mobile widget to display a list.

I want to change the background color of the list selected element.

Does anyone has any idea how to achieve this.



Thanks,

DM

Hi Dhiraj,

The CSS class .list-item-selected  is only used by default for Desktop and tablet.

.desktop .list .list-item:hover:not(.list-item-selected) {
    background-color: var(--color-neutral-2);
}

.desktop .list .list-item-selected,
.tablet.landscape .list .list-item-selected {
    background: var(--color-primary) var(--color-primary-lightest);
}

.desktop .list .list-item-selected .list-item-content-title,
.tablet.landscape .list .list-item-selected .list-item-content-title {
    color: var(--color-neutral-10);
}

.desktop .list .list-item-selected .list-item-content-right .icon,
.tablet.landscape .list .list-item-selected .list-item-content-right .icon {
    color: var(--color-primary);
}

.desktop .list .list-item-selected .list-item-content-text,
.tablet.landscape .list .list-item-selected .list-item-content-text {
    color: var(--color-neutral-8);
}

So if you want this to work on mobile you can add:

.list .list-item:hover:not(.list-item-selected) {
    background-color: var(--color-neutral-2);
}

.list .list-item-selected{
    background: var(--color-primary) var(--color-primary-lightest);
}

.list .list-item-selected .list-item-content-title {
color: var(--color-neutral-10);
}

.list .list-item-selected .list-item-content-right .icon {
    color: var(--color-primary);
}

.list .list-item-selected .list-item-content-text {
    color: var(--color-neutral-8);
}

This will now have the same effect on mobile as on web and tablet, of course you can change the colors to what you want.

Regards,

Daniel