angular-material change checkbox color

Question

I'm using checkbox of angular-material2. Currently the default color of checkbox is coming as purple color.
Looks like they have changed default color of checkbox from "primary" to accent.
Is there a way to get "primary"(green) color instead of purple without overriding css.
I tried giving color="primary" to but that didn't worked.

Code : <md-checkbox></md-checkbox>

Import statement:

import {MdCheckbox} from '@angular2-material/checkbox';

Plunker http://plnkr.co/edit/sFC0kfdzj7fxtUC3GXdr?p=preview

Change the "color" (material.angular.io/components/checkbox/api) property should be the accepted answer. Someone looking for it is being buried on excption cases when they just want to change the color of a simple checkbox... — André Baptista
– André Baptista, Commented Sep 6, 2023 at 17:03
Someone who is using angular material most probably knows the answer you provided. But even more probably someone is looking for it because he wanted to use a color other than the 3 that work with your solution. — Poniros
– Poniros, Commented Nov 21, 2023 at 14:27

abstractME · Accepted Answer · 2022-09-01 23:19:46Z

48

Based on feedback from comments, updated my answer by removing '::ng-deep', but please read comment by @colin-fox, and understand how this will behave in global styling and at component level, many thanks!

For Angular Material 7, works for outline color and inside filled in color

.mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
    opacity: 0.03 !important;
    background-color: #005691!important;
  }

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

edited Sep 1, 2022 at 23:19

answered Aug 14, 2019 at 2:41

abstractME

5716 silver badges10 bronze badges

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

6 Comments

Eray T Over a year ago

This is the correct answer. However, I would remove the opacity because it leaves a faded mark. Also, this doesn't change the color of the initial ripple.

Maulik Parmar Over a year ago

Thanks, It worked for me but for angular 9 we must removed '::ng-deep' to work it properly.

Gel Over a year ago

ng-deep will be depracated, I believe... I had work around, I posted it here somewhere. Hope that helps.

Tore Aurstad Over a year ago

This also works in Angular Material 11.x Great tip and a funny bit is that your sample also included the exact color setup i wanted !

Collin Over a year ago

@Halil it definitely shouldn't be required but the Angular team has made it difficult if not impossible to style things without ng-deep or without making the style global by putting it in styles.css (ng-deep not needed there). I mean we could just use selectors and put everything in styles.css for all Material related things but that seems a bit ridiculous

|

Stephen Paul · Accepted Answer · 2020-11-30 13:38:54Z

40

You don't have to add css if you'r using theme, just add attribute color to <mat-checkbox>

<mat-checkbox color="primary">Primary</mat-checkbox>

The color of a <mat-checkbox> can be changed by using the color property. By default, checkboxes use the theme's accent color. This can be changed to 'primary' or 'warn' Checkbox | Angular Material

edited Nov 30, 2020 at 13:38

Stephen Paul

39.4k18 gold badges99 silver badges76 bronze badges

answered Nov 29, 2018 at 11:41

Khan Abdulrehman

8642 gold badges10 silver badges22 bronze badges

1 Comment

Gel Over a year ago

so if I want to use our corporate colors, outside of the theme, how do I change the color?

Bruno João · Accepted Answer · 2018-07-12 00:56:58Z

16

One of the standard ways to do this is to utilize the /deep/ selector

mat-checkbox {
    color: rgb(0,178,0);
    /deep/ .mat-checkbox-background {
        background-color: rgb(0,178,0);
    }

    /deep/ &.mat-checkbox-focused{
        .mat-ink-ripple{
            background-color: rgba(0, 178, 0, .26);
        }
    }
}

That will allow you to override styles in components where Shadow Dom is enabled.

edited Jul 12, 2018 at 0:56

Bruno João

5,6042 gold badges23 silver badges26 bronze badges

answered Aug 31, 2016 at 18:15

chimon2000

4011 gold badge5 silver badges11 bronze badges

Comments

codeandcloud · Accepted Answer · 2021-06-29 21:34:16Z

14

This solution works well for me

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

edited Jun 29, 2021 at 21:34

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

answered Feb 19, 2020 at 23:00

Omar Pacheco

1491 silver badge2 bronze badges

Comments

Dominik Brázdil · Accepted Answer · 2023-02-20 10:40:04Z

12

Update for Angular Material 15:

.mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background, .mdc-checkbox__ripple {
    background-color: green !important;
    border-color: green !important;
}

answered Feb 20, 2023 at 10:40

Dominik Brázdil

5324 silver badges13 bronze badges

2 Comments

Ashish Dev Over a year ago

How do u do that, for intermediate state?

Jayna Tanawala Over a year ago

@Dominik, How can I change the tickmark color?

Sunny Goel · Accepted Answer · 2019-06-28 02:25:10Z

11

Default color depends upon the theme which you @import.

But angular material also provide way to customize the theme or for customizing the components like changing the color of checkbox.

Steps of doing this as follow :-

1.) Import the _theming.scss file

 @import "../node_modules/@angular/material/theming";

2.) Specify the accent color i.e. color of check box you want to apply like below :-

  // customising of the mat-checkbox accordiing Theme. i am using pink indigo theme 
     bydefault so here I am changing the checkbox color from pink to grey.


    $candy-app-primary: mat-palette($mat-indigo);

    // here I am specify the grey instead of Pink.

    $candy-app-accent: mat-palette($mat-grey, 600, 500, 900);
    $candy-app-warn: mat-palette($mat-red);

    // Create the theme object (a Sass map containing all of the palettes).
    $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

    // here I am only calling checkbox mixin because i only want to change the checkbox color     
    @include mat-checkbox-theme($candy-app-theme);

Hope it will help.

answered Jun 28, 2019 at 2:25

Sunny Goel

2,2002 gold badges18 silver badges24 bronze badges

1 Comment

Jonathan Southern Over a year ago

This isn't as helpful as the person doesn't want to and shouldn't change their entire theme just for a single components coloring

Eray T · Accepted Answer · 2019-11-26 16:22:04Z

6

Angular 7+

This will work for checkbox as well as the initial ripple color. If you just change the background for the checkbox, the initial ripple color won't update. This resolves the issue.

SCSS:

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

    .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
        background-color: $your-color;
     }
}

::ng-deep .mat-checkbox.mat-accent {
    .mat-checkbox-ripple .mat-ripple-element {
        background-color: $your-color !important;
    }
}

answered Nov 26, 2019 at 16:22

Eray T

7876 silver badges14 bronze badges

Comments

kingabdr · Accepted Answer · 2021-02-25 09:54:38Z

5

This worked for me with Angular 10: In your styles.scss:

//Change background color

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #1f45cc;
}

//Change the border color for both checked and unchecked cases

.mat-checkbox-frame {
  border-color: #1f45cc;
}

answered Feb 25, 2021 at 9:54

kingabdr

6781 gold badge7 silver badges14 bronze badges

Comments

Ariel Colque Herrera · Accepted Answer · 2020-06-21 20:34:22Z

4

A combination of answers worked for me in angular 9

.mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
  opacity: 0.03 !important;
  background-color: #005691 !important;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #005691 !important;
}
.mat-checkbox-ripple .mat-ripple-element,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: #005691 !important;
}

answered Jun 21, 2020 at 20:34

Ariel Colque Herrera

411 silver badge1 bronze badge

Comments

Bhupinder · Accepted Answer · 2020-10-27 12:38:29Z

There are two methods(that i know ) to change the background color of mat-checkbox (angular 9)-

method 1 - by using color property of the mat-checkbox .

       <mat-checkbox
          id="{{ subtask.name }}"
          [color]="accent"
        >
          Check
        </mat-checkbox>

Limitation - You can only use color according to the angular material theme by this method .

method 2 - If you want to give custom colors to the mat-checkbox first track down the classes till the target class you want to change color of. tracking of nested classes

after that write like this in your style.css(global) file-

1st checkbox

.l0
  .mat-checkbox-checked
  .mat-checkbox-layout
  .mat-checkbox-inner-container
  .mat-checkbox-background {
  background-color: #ffbf00 !important;
}

2nd checkbox

.l1
  .mat-checkbox-checked
  .mat-checkbox-layout
  .mat-checkbox-inner-container
  .mat-checkbox-background {
  background-color: #4caf50 !important;
}

Result - different color for different mat-checkbox

DevVersion · Accepted Answer · 2017-03-02 19:56:56Z

3

With beta.2 of Angular Material, the color attribute should work.

There were some issues with it before beta.2

See the commit that fixed that issue.

answered Mar 2, 2017 at 19:56

DevVersion

2,03316 silver badges15 bronze badges

Comments

Pirate X · Accepted Answer · 2016-05-20 06:59:41Z

2

This should take care of the default checkbox color

md-checkbox .md-icon {
    background: green;
}
md-checkbox.md-default-theme.md-checked .md-icon {
    background: green;
}

read more here at Angular Material Documentation

answered May 20, 2016 at 6:59

Pirate X

3,1156 gold badges40 silver badges64 bronze badges

3 Comments

Krishna Over a year ago

This is for angular-material 1.8. My question is for material2. Changing css is one of the way but I'm looking for a way to do it without changing/overriding css because angular-material2 itself has lot many themes. I want a way to use existing theme without overriding css.

Pirate X Over a year ago

Correct me if I am wrong but I think the latest version for Angular-Material is 1.0.8.

Krishna Over a year ago

Yes you are correct. Released version is 1.0.8. But angular-material2 is in alpha version and is yet to released. angular-material2 is for angular2.

shuk · Accepted Answer · 2018-08-30 03:10:31Z

2

The following will keep frame grey when unchecked but change to custom color when checked:

relevant-scss-file.scss

mat-checkbox {
  &.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background {
   background: rgb(0,178,0);
  }
}

answered Aug 30, 2018 at 3:10

shuk

1,8131 gold badge18 silver badges26 bronze badges

Comments

Thiago C. S Ventura · Accepted Answer · 2019-03-04 10:39:25Z

2

Since deep is deprecated. In my view the right way to do it is using encapsulation: ViewEncapsulation.None.

ex:

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None,
})

Then you just need to change the class

.mat-checkbox-background {
  background-color: green;
}

You just need to be careful to deal with global css stuff. In SASS nested classes should handle it properly.

You can have more details here: https://stackoverflow.com/a/54672579/783364

answered Mar 4, 2019 at 10:39

Thiago C. S Ventura

2,6921 gold badge32 silver badges45 bronze badges

Comments

Peyman Mohamadpour · Accepted Answer · 2020-05-29 10:29:24Z

For me what has worked is the following:

<mat-checkbox class="tn-checkbox">Check me!</mat-checkbox>

In the css (or in my case sass):

.#{$wf__ns}checkbox {
  .mat-checkbox-ripple {
    .mat-ripple-element {
      background: $cool-blue !important;
    }
  }

  &.mat-checkbox-checked {
    .mat-checkbox-background {
      background: $cool-blue;
    }
    .mat-checkbox-ripple {
      .mat-ripple-element {
        background: $cool-blue !important;
      }
    }
  }
}

Explanation:

The checked background color is changed to mat-checkbox-background within mat-checkbox-checked. IF you want to modify the background color when it is not checked just copy that part and copy it outside of mat-checkbox-checked.

As for the ripple classes, it turns out that the material has an animation when you press the button. That class controls the color of the animation, if you don't change it it will remain the same (pink).

If you do not change it by pressing the checkbox you will see a strange pink effect.

The other answers do not work for me although I rely on the first to develop it.

It may be from my version of angular that I leave below:

Angular CLI: 8.3.25
Node: 13.3.0
Angular: 8.2.14

Fahimeh Ahmadi · Accepted Answer · 2020-10-10 15:39:09Z

2

You can change the color of the border this way.(angular)

::ng-deep .mat-checkbox {
    .mat-checkbox-ripple .mat-ripple-element {
        background-color: #07abe9 !important;
    }
    .mat-checkbox-frame {
        border-color: #07abe9 !important;
    }
}

answered Oct 10, 2020 at 15:39

Fahimeh Ahmadi

1,04312 silver badges14 bronze badges

Comments

Gel · Accepted Answer · 2020-09-11 18:09:17Z

1

This is what works. On our JHIPSTER project, we have a global.scss. Here is what you need to do if you do have a global.

Wrap your component html with a class. Forexample:

<div class="supplier-details-container">
  <!-- rest of your html here -->
</div>

In the global.scss or global.css write your css/scss like so (Im using red to test):

.supplier-details-container .mat-checkbox-ripple .mat-ripple-element,.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: red !important;
}

Basically using css hierarchy wrapping the native angular material css with your component class that you use to wrap your component html.

Let me know if it works or not. We can debug.

answered Sep 11, 2020 at 18:09

Gel

3,0662 gold badges20 silver badges25 bronze badges

Comments

av1000 · Accepted Answer · 2023-06-30 15:04:32Z

1

For Angular Material 15 To go alongside @Dominik Brázdil answer - You can use the mdc css variables to change the colour, you can find the different states in the inspect elements.

.mat-mdc-checkbox {
    --mdc-checkbox-state-layer-size: 16px;

    &.mat-accent {
        --mdc-checkbox-selected-focus-icon-color: #2E2E38 !important;
        --mdc-checkbox-selected-hover-icon-color: #2E2E38 !important;
        --mdc-checkbox-selected-icon-color: #2E2E38 !important;
        --mdc-checkbox-selected-pressed-icon-color: #2E2E38 !important;
    }
}

answered Jun 30, 2023 at 15:04

av1000

111 bronze badge

1 Comment

Jayna Tanawala Over a year ago

&.mat-accent showing warning "CSS nesting syntax is not supported in the configured target environment ("chrome119.0", "edge119.0", "firefox102.0", "ios16.0", "safari16.0") [invalid-@nest]"

yamlz · Accepted Answer · 2024-10-28 13:03:37Z

1

If you just want to change the background color of an unselected checkbox you can use:

input:not(.mdc-checkbox--selected) ~ .mdc-checkbox__background {
   background-color: green !important;
}

answered Oct 28, 2024 at 13:03

yamlz

113 bronze badges

Comments

Ayman Ftiti · Accepted Answer · 2017-06-30 11:12:33Z

0

this solution works well for me

/deep/.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #3490d3;
}

edited Jun 30, 2017 at 11:12

answered Jun 30, 2017 at 9:16

Ayman Ftiti

871 silver badge2 bronze badges

Comments

Tolulope Adetula · Accepted Answer · 2020-03-06 16:07:00Z

0

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

.mat-checkbox-checked.mat-primary .mat-checkbox-background, .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background{
      background-color: $your-color!important;
}

answered Mar 6, 2020 at 16:07

Tolulope Adetula

11 bronze badge

Collectives™ on Stack Overflow

angular-material change checkbox color

21 Answers 21

6 Comments

1 Comment

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

21 Answers 21

6 Comments

1 Comment

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related