Can I change the color of Angular Material checkbox with some custom color and how?

Question

I'm trying to do this, but is looks like it is only possible to change it to primary or warn.

P.S. · Accepted Answer · 2020-01-08 21:47:38Z

42

The proper way to control colors of Angular Material elements is to use differrent pallettes, but the functionality is limited. If you want more control, you can add custom CSS, and in most cases you will need to use ::ng-deep to force your styles to apply, for example:

::ng-deep .mat-checkbox .mat-checkbox-frame {
  border-color: violet;
}

Here is a DEMO, where I changed the color of the border and background when it checked. You can follow this way to implement any styling you want.

If you're not familiar with ::ng-deep and don't really understand, when you need it, you can look through THIS short answer.

UPDATE 1

There is another one way via encapsulation disabling (thanks to @Ventura). It has a right to exist, but be careful if you decided to disable encapsulation, don't confuse with stylesheets, because it behaves differently from what you expect from default Angular logic regarding CSS.

For more info: https://coryrylan.com/blog/css-encapsulation-with-angular-components

SO answer: https://stackoverflow.com/a/54981478/6053654

UPDATE 2

The method is deprecated, see more info HERE or HERE.

edited Jan 8, 2020 at 21:47

answered Jun 11, 2018 at 10:43

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Kristina Barutska Over a year ago

Thank you two. This is what I have done: ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate, .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate { background-color:green !important; }

Thiago C. S Ventura Over a year ago

deep is deprecated.

P.S. Over a year ago

@Ventura Is there any analog for now?

Thiago C. S Ventura Over a year ago

@CommercialSuicide here is the solution that I found: stackoverflow.com/a/54981478/783364 not sure if it's the best one but if you are careful with global css stuff it should be just fine.

P.S. Over a year ago

@ararb78, that's right, but what if we need to customize AM styles? Do we have such an option in other ways? View encapsulation disabling is not ideal btw

|

Prachi · Accepted Answer · 2018-08-17 06:50:56Z

11

You may use this:

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate, .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate {
    background-color: red !important; /* Red background for example */
}

edited Aug 17, 2018 at 6:50

answered Jun 11, 2018 at 10:48

Prachi

3,60421 silver badges38 bronze badges

2 Comments

Vingtoft Over a year ago

If you are using a newer version of Angular: Use /deep/ instead for ::ng-deep

Thiago C. S Ventura Over a year ago

deep is deprecated.

Mohammad Jamal Dashtaki · Accepted Answer · 2022-05-17 08:40:49Z

6

You can use this code to change its box and its check icon:

/*  In case of using Angular 9+, Replace /deep/ with ::ng-deep */

/deep/ .mat-checkbox.mat-accent {
  .mat-checkbox-frame {
    border: 1px solid dodger-blue;
  }

  &.mat-checkbox-checked .mat-checkbox-background {
    background-color: white;
    border: 1px solid dodger-blue;
  }

  .mat-checkbox-checkmark-path {
    stroke: dodger-blue !important;
  }
}

Angular Material Version: "7.0.0"

edited May 17, 2022 at 8:40

answered Jul 30, 2019 at 6:53

Mohammad Jamal Dashtaki

1,5731 gold badge16 silver badges24 bronze badges

1 Comment

Anand Kumar Over a year ago

It works, just Replace '/deep/' with '::ng-deep' for Angular 9+ versions.

aycanadal · Accepted Answer · 2020-02-20 09:25:03Z

2

These answers didn't work for me for indeterminate boxes. Following did:

::ng-deep .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
  background-color: #222d32 !important;
}

answered Feb 20, 2020 at 9:25

aycanadal

1,1462 gold badges15 silver badges45 bronze badges

Comments

Abdus Salam Azad · Accepted Answer · 2019-04-30 04:02:50Z

0

Use this on your css.

::ng-deep .mat-primary .mat-pseudo-checkbox-checked {
    background: red;
}

You should use ::ng-deep otherwise it will not work.

On your Html, use like this,

<mat-form-field>
  <mat-select placeholder="values" [formControl]="val" multiple>
    <mat-option *ngFor="let v of values" [value]="v">{{v.text}}</mat-option>
  </mat-select>
</mat-form-field>

answered Apr 30, 2019 at 4:02

Abdus Salam Azad

5,59252 silver badges37 bronze badges

Comments

ghiles ybeggazene · Accepted Answer · 2020-09-06 17:55:11Z

0

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #005691;
  }

answered Sep 6, 2020 at 17:55

ghiles ybeggazene

2753 silver badges3 bronze badges

1 Comment

FluffyKitten Over a year ago

Code-only answers are discouraged on Stack Overflow because they don't explain how it solves the problem. Please edit your answer to explain what this code does and how it answers the question, so that it is useful to the OP as well as other users with similar issues.

StackOverflowUser · Accepted Answer · 2020-09-14 01:23:48Z

0

I was specifically interested in changing the color of the frame around the checkbox and the label text. This worked for me:

div.mat-checkbox-frame {
    border-color: red;
}

span.mat-checkbox-label {
    color: red;
}

answered Sep 14, 2020 at 1:23

StackOverflowUser

1,16313 silver badges14 bronze badges

Comments

misterrodger · Accepted Answer · 2022-01-20 16:12:43Z

0

Had to do this, slight variation of other answers:

::ng-deep .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
  background: $my-colour;
}

answered Jan 20, 2022 at 16:12

misterrodger

2252 silver badges9 bronze badges

Comments

Chiranjaya Denuwan · Accepted Answer · 2022-01-23 05:44:55Z

0

You can use

.mat-checkbox-ripple .mat-ripple-element,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: $your-color-code !important;
}

answered Jan 23, 2022 at 5:44

Chiranjaya Denuwan

6837 silver badges10 bronze badges

Comments

Luna Willems · Accepted Answer · 2025-09-11 10:06:37Z

I'm using Angular 20, which comes with the Angular Material Token API for customizing component styles. As you might already know, for most components, you can use SCSS mixins to override their colors and states, like this:

@use '@angular/material' as mat;

:root {
  @include mat.select-overrides((
    focused-arrow-color: red
  ));
}

But for <mat-pseudo-checkbox>, there isn't a mixin or API like there is for other components. If you inspect the checkbox, you'll see the checked state uses:

background-color: var(--mat-pseudo-checkbox-full-selected-icon-color, var(--mat-sys-primary));

Instead of using a mixin, you just define the variable it uses for the background color in your SCSS:

:root {
  --mat-pseudo-checkbox-full-selected-icon-color: #db3747;
}

So, just set the variable directly to customize the color.
Hope this helps!

Collectives™ on Stack Overflow

Can I change the color of Angular Material checkbox with some custom color and how?

10 Answers 10

UPDATE 1

UPDATE 2

8 Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

UPDATE 1

UPDATE 2

8 Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related