Angular select list multiple selection with no checkbox not working properly-CodePudding

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

Demo :

CodePudding user response：

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.

CodePudding user response：

In the example you don't do nothing in the onNgModelChange in which you should update your selected option