CODEWITHSUNDEEP
angular-material
Krishna
Krishna

Reputation: 1985

angular-material change checkbox color

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

Upvotes: 53

Views: 167653

Answers (21)

yamlz
yamlz

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

Upvotes: 0

av1000
av1000

Reputation: 11

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

Upvotes: 1

Dominik Br&#225;zdil
Dominik Br&#225;zdil

Reputation: 493

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

Upvotes: 11

abstractME
abstractME

Reputation: 551

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

Upvotes: 46

Omar Pacheco
Omar Pacheco

Reputation: 149

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

Upvotes: 14

kingabdr
kingabdr

Reputation: 658

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

Upvotes: 4

Khan Abdulrehman
Khan Abdulrehman

Reputation: 854

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

Upvotes: 39

Bhupinder
Bhupinder

Reputation: 41

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

Upvotes: 4

Fahimeh Ahmadi
Fahimeh Ahmadi

Reputation: 1029

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

Upvotes: 2

Gel
Gel

Reputation: 3026

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.

  1. Wrap your component html with a class. Forexample:

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

  1. 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.

Upvotes: 1

Ariel Colque Herrera
Ariel Colque Herrera

Reputation: 41

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

Upvotes: 4

IvanAllue
IvanAllue

Reputation: 545

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

Upvotes: 2

Tolulope Adetula
Tolulope Adetula

Reputation: 1

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

Upvotes: 0

Eray T
Eray T

Reputation: 767

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

Upvotes: 6

Sunny Goel
Sunny Goel

Reputation: 2132

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.

Upvotes: 11

Thiago C. S Ventura
Thiago C. S Ventura

Reputation: 2602

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

Upvotes: 2

shuk
shuk

Reputation: 1823

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

Upvotes: 2

chimon2000
chimon2000

Reputation: 401

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.

Upvotes: 16

Ayman Ftiti
Ayman Ftiti

Reputation: 87

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

Upvotes: 0

DevVersion
DevVersion

Reputation: 2033

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.

Upvotes: 3

Pirate X
Pirate X

Reputation: 3093

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

Upvotes: 2

Related Questions