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.

Do you need CSS for it or dynamic code? – Prachi Jun 11 '18 at 10:23 — Prachi, Jun 11 '18 at 10:23
I think CSS would be enough. I'm new in Angular. – Kristina Barutska Jun 11 '18 at 10:39 — Kristina Barutska, Jun 11 '18 at 10:39

P.S. · Accepted Answer · 2020-01-08T21:47:38.257

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 08 '20 at 21:47

answered Jun 11 '18 at 10:43

P.S.

15,970
14
62
86

1

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; } – Kristina Barutska Jun 11 '18 at 11:05
1

deep is deprecated. – Thiago C. S Ventura Mar 04 '19 at 10:19
@Ventura Is there any analog for now? – P.S. Mar 04 '19 at 11:56
1

@CommercialSuicide here is the solution that I found: https://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. – Thiago C. S Ventura Mar 06 '19 at 11:11
@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 – P.S. Aug 01 '19 at 08:21
since ng-deep is depracated, this solution worked for us with a JHIPSTER app, we have a global css and here is the complete solution: https://stackoverflow.com/questions/37339735/angular-material-change-checkbox-color/63852220#63852220 – Gel Sep 11 '20 at 18:25
@Gel, yes, putting your styles into a global stylesheet will work in most cases, why not. But does it work with libraries like Angular Material? I'm not sure about that, but if so, I think it's a matter of taste, to keep specific rules in a global stylesheet, or store it into a specific component's stylesheet file to keep your style rules cleaner and better organised (IMO) – P.S. Sep 11 '20 at 22:37
@CommercialSuicide it works. We are using Angular material. Try it out. Matter of taste or not, Im answering here, cause the method we used works for libraries such as angular material. Atleast checkout the link, and the solution. Answer here suggests using ng-deep, that will depracate soon as you have stated above. So consider the approach in the link I provided. Test it, then and only then can you say if its a matter of taste. Understood, people do things differently, but thats not the case here, I am trying to solve the OPs question. – Gel Sep 12 '20 at 00:35

Prachi · Answer 2 · 2018-08-17T06:50:56.577

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 '18 at 06:50

answered Jun 11 '18 at 10:48

Prachi

3,478
17
34

If you are using a newer version of Angular: Use /deep/ instead for ::ng-deep – Vingtoft Jan 30 '19 at 15:05
deep is deprecated. – Thiago C. S Ventura Mar 04 '19 at 10:20

Mohammad Jamal Dashtaki · Answer 3 · 2022-05-17T08:40:49.733

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 '22 at 08:40

answered Jul 30 '19 at 06:53

Mohammad Jamal Dashtaki

1,415
1
16
23

1

It works, just Replace '/deep/' with '::ng-deep' for Angular 9+ versions. – Anand Kumar Jan 27 '21 at 05:28

score 2 · Answer 4 · answered Feb 20 '20 at 09:25

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 '20 at 09:25

aycanadal

1,106
2
15
42

score 0 · Answer 5 · answered Apr 30 '19 at 04:02

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>

score 0 · Answer 6 · answered Sep 06 '20 at 17:55

0

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

answered Sep 06 '20 at 17:55

ghiles ybeggazene

241
3
3

1

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. – FluffyKitten Sep 07 '20 at 02:11

score 0 · Answer 7 · answered Sep 14 '20 at 01:23

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 '20 at 01:23

StackOverflowUser

945
12
10

score 0 · Answer 8 · answered Jan 20 '22 at 16:12

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 '22 at 16:12

misterrodger

216
2
8

score 0 · Answer 9 · answered Jan 23 '22 at 05:44

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 '22 at 05:44

Chiranjaya Denuwan

614
7
10

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

9 Answers9

UPDATE 1

UPDATE 2

Linked