Angular Material - Change color of mat-list-option on selected

Question

How can I change the color of selected option of mat-list-option? Right now I have something like this:

Current list

I want to change the color of whole option or card 'on select' to green. Something like this:

My code is like this:

<mat-selection-list #list>
    <mat-list-option *ngFor="let yuvak of yuvaks">
    {yuvak.name}
    {yuvak.phonenumber}
     </mat-list-option>
</mat-selection-list>

Answer 1

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

Answer 2

Drop Down:

The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need.

.mat-option.mat-active {
  background: blue !important;
}

.mat-option.mat-selected {
  background: red !important;
}

Working Demo

Selection List:

The selection list has aria-selected attribute and by default it is false. It changes to true if you select the item. All you need is to set CSS as below:

.mat-list-option[aria-selected="true"] {
  background: rgba(200, 210, 90, 0.7);
}

Working Demo

Answer 3

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-selected:not(.mat-option-multiple) { background: mat-color($background, hover, 0.12);}

Demo: https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-qaq1xr

Or, if you use a dark theme, change code as follows:

mat-list-option[aria-selected="true"] {
  background: mat-color($mat-dark-theme-background, hover, 0.12);
}

Demo: https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-w8beng

If you just want to use a custom color, I suggest to pick one from Material Specs, that are also exposed in Angular Material Design scss.

$primaryPalette: mat-palette($mat-green);

mat-list-option[aria-selected="true"] {
  background: mat-color($primaryPalette, 500);
}

Demo: https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-tt3nyj

Answer 4

Sometimes using [aria-selected] seems too 'obtuse'.

You can also grab the selected state of a node and use that as required.

Example 1: You have a child component you need to pass the state to

<mat-list-option #option>

   <app-custom-list-option-widget [selected]="option.selected"></app-custom-list-option-widget>

</mat-list-option>

Example 2: You want to set a custom css class instead of using [aria-selected]

.is-selected { color: red; }

Then in the template:

<mat-list-option #option>

   <span [class.is-selected]="option.selected"> Option text </span>

</mat-list-option>

Answer 5

For mat-list-option properties css changes,

to change onHover css :

   .mat-list-option:hover {
      width: 270px!important;
    }

to change OnActive css:

 .mat-list-option[aria-selected="true"] {
      width: 270px!important;
    }
    .mat-list-option:active,
    .mat-list-text:active{
    background-color: none!important;
    }