Angular Material - change color of clicked mat-list-option - angular-material2

Question

Is there a possibility to change the default color of a checked checkbox (mat-pseudo-checkbox-checked):
<mat-selection-list #shoes>
<mat-list-option *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
</mat-selection-list>
I have tried:
.mat-pseudo-checkbox-checked {
background-color: #00f;
}
but it has no impact.

Answer 1

Just add class="mat-primary" inside <mat-list-option>
<mat-selection-list>
<mat-list-option class="mat-primary" checkboxPosition="before" *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
Output:

Answer 2

I am not sure but you can try using this
.mat-select-content, .mat-select-panel-done-animating {
background: mat-color($background, card);
}
to
.mat-select-content, .mat-select-panel-done-animating {
background: mat-color($background, card);
.mat-option {
color : mat-color($foreground, text);
}
}
for details, you can also check the following link
https://github.com/angular/material2/blob/master/src/lib/list/_list-theme.scss

Answer 3

.mat-pseudo-checkbox{
background-color: red;
}
this worked for me, just apply background-color property to checkbox class, remove checked class

Answer 4

Checking in with Material v 7.3.6, similar to Sathwik, I had success with
.mat-pseudo-checkbox-checked {
background: #FF0;
}
Adding -checked at the end ensures that the checkbox is only colored in when it is actively checked, otherwise the box is always that color (which may be your goal?). Note that I had to include this style in the highest level styles.css file instead of the individual component style file for it to successfully work.
If you have multiple selection lists, you can apply the styles to the desired lists with classes. Furthermore, you can apply different colors to each checkbox option within a selection list using dynamically generated classes too! Example here: https://stackblitz.com/edit/angular-dtfd6x?file=app/list-selection-example.ts
You can see that the first selection list has the basic styling, whereas the second list (wrapped in unique-selection-list class) has different styling with each option having a unique color (generated by applying unique classes to each option with the *ngFor loop.
// HTML file
<mat-selection-list #shoes>
<mat-list-option *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
</mat-selection-list>
<p>
Options selected: {{shoes.selectedOptions.selected.length}}
</p>
<br>
<hr>
<mat-selection-list #colors>
<div class="unique-selection-list">
<div *ngFor="let color of colorsList" [class]="color.className">
<mat-list-option
[value]="color.displayName">
{{ color.displayName }}
</mat-list-option>
</div>
</div>
</mat-selection-list>
// component.ts file constants
typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
colorsList = [
{
hexCode: '#00F',
displayName: 'Blue',
className: 'blue-checkbox',
},
{
hexCode: '#F0F',
displayName: 'Fuchsia',
className: 'fuchsia-checkbox',
},
{
hexCode: '#0F0',
displayName: 'Green',
className: 'green-checkbox',
},
];
}
// styles.css
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
.unique-selection-list .blue-checkbox .mat-pseudo-checkbox-checked {
background: #00F !important;
}
.unique-selection-list .fuchsia-checkbox .mat-pseudo-checkbox-checked {
background: #F0F !important;
}
.unique-selection-list .green-checkbox .mat-pseudo-checkbox-checked {
background: #0F0 !important;
}

Answer 5

SRC/STYLES.SCSS
.mat-list-option {
.mat-list-item-content {
padding: 2px !important;
.mat-list-text {
padding: 2px !important;
}
.mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
background-color: darkorange;
}
}
}
If you have other groups you can do this
HTML
<mat-selection-list ...>
<mat-list-option formfiltros-operaciones ...>
{{operacion.nombre}}
</mat-list-option>
</mat-selection-list>
<mat-selection-list ...>
<mat-list-option formfiltros-inmuebles ...>
{{inmueble.nombre}}
</mat-list-option>
</mat-selection-list>
<mat-selection-list ...>
<mat-list-option formfiltros-localidades ...>
{{localidad.nombre}}
</mat-list-option>
</mat-selection-list>
SRC/STYLES.SCSS
Fix padding
.mat-list-option {
.mat-list-item-content {
padding: 2px !important;
.mat-list-text {
padding: 2px !important;
}
}
}
apply pseudo-check color to 'formfiltros-operaciones' group
.mat-list-option[formfiltros-operaciones] {
.mat-list-item-content {
.mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
background-color: darkorange;
}
}
}
apply color for pseudo-check in 'formfiltros-inmuebles' group
.mat-list-option[formfiltros-inmuebles] {
.mat-list-item-content {
.mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
background-color: green;
}
}
}
apply color for pseudo-check in 'formfiltros-localidades' group
.mat-list-option[formfiltros-localidades] {
.mat-list-item-content {
.mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
background-color: blue;
}
}
}
it looks like this