Angular Material - Change Color Of Mat-list-option On Selected
Answer : You can use aria-selected="true" attribute from mat-list-option tag to target the selected option, and provide corresponding css properties for the same. mat-list-option[aria-selected="true"] { background: rgba(0, 139, 139, 0.7); } Stackblitz Working Demo The accepted answer works fine, but it uses a hardcoded color value ( background: rgba(0, 139, 139, 0.7) ). This approach will actually break your styles and colors if you decide to switch to another pre-build material theme or use a custom theme (as described in Theming your Angular Material app page). So, if you use SCSS, you can use the following code in your component's style file: @import '~@angular/material/theming'; mat-list-option[aria-selected="true"] { background: mat-color($mat-light-theme-background, hover, 0.12); } The above code is adapted from mat-select options - in this way, you will have a consistent look in the entire app: .mat-option.mat-s...