Issue
Im doing a list of selectable items and checkbox should not be visibile.
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.
Answered By - Telman
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.