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

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.

**Try these** *1*. Add the parent class of the list is place like .some-class .mat-pseudo-checkbox-checked { background-color: #00f; } **2**: !important keyword **3** : write your class in style.css(put the parent class if used more times) — Aashiq Rathnadas, Mar 19 '18 at 09:35
There are two options, either your CSS selector is not specific enough to overwrite that material CSS rule, or your selector is component scoped and therefore doesn't work outside of your component template elements. — Dan Macak, Mar 19 '18 at 10:55

score 9 · Answer 1 · answered May 07 '19 at 14:13

9

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:

answered May 07 '19 at 14:13

vaishali KUNJIR

997
11
9

2

This is the right way in order to follow the theme. In my case, I needed mat-accent. – l p Apr 24 '20 at 12:50

score 6 · Accepted Answer · edited Oct 14 '18 at 05:28

6

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

edited Oct 14 '18 at 05:28

Talha Junaid

2,351
20
29

answered Mar 19 '18 at 11:52

Rahul shukla

378
1
12

I think that only works with SCSS. If You are using plain old CSS, then try https://stackoverflow.com/a/39256413/3887137 – MrMeszaros Jul 27 '18 at 09:49

score 1 · Answer 3 · answered Mar 19 '18 at 11:53

1

.mat-pseudo-checkbox{
background-color: red;
}

this worked for me, just apply background-color property to checkbox class, remove checked class

answered Mar 19 '18 at 11:53

Sathwik Gangisetty

268
5
17

score 0 · Answer 4 · answered Aug 02 '19 at 14:27

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;
}

Matias Frith · Answer 5 · 2020-01-04T02:38:01.427

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

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

5 Answers5

Linked