Angular select list multiple selection with no checkbox not working properly

Im doing a list of selectable items and checkbox should not be visibile.

Demo :
https://stackblitz.com/edit/mat-selection-list-get-options-gcsdjd?file=src%2Fapp%2Flist-selection-example.css,src%2Fapp%2Flist-selection-example.ts

Background field when items selected its not working properly

>Solution :

I think what happens in your CSS is that mat-list-option:hover and mat-list-option:focus styles have higher specificity than your styles,

So whenever your list item is hovered or focused (it happens when you click on the item) you see the styles from mat-list-option:hover.

What you need to do is to make specificity of your styles higher, for example:

mat-list-option[aria-selected='true'],
mat-list-option[aria-selected='true']:hover,
mat-list-option[aria-selected='true']:focus {
  background: rgba(0, 139, 139, 0.7);
}

Or you can just add an additional class to your list items, and then use it in the CSS:

mat-list-option.list-item[aria-selected='true'] {
  background: rgba(0, 139, 139, 0.7);
}

And of course you can use important modifier as a last resort.