md-checkbox Angular materials styling

Question

Using Angular materials with Angular4, I cannot find a way to change checkbox color after checked.

The only way worked for me to modify styling at the initial view is:

:host /deep/ .mat-checkbox-inner-container{
     height:15px;
     width:15px; 
     background-color: rgba(0, 255, 0, 0.87);
}

Trying to change styling after on checked, the following did not worked:

:host /deep/ .mat-checkbox-checked {
background-color:yellow;   
}

It actually applied after check, but in wrong element - did not apply at the inner container.

Something like :host /deep/ .mat-checkbox-inner-container-checked does not work as well.

Any help is welcome.

Answer 1

Try this one :)

.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: rgb(27, 142, 241) !important;
}

.mat-ripple-element {
  background: rgba(27, 142, 241, .4) !important;
}

Answer 2

Try this one :)

/deep/ .mat-checkbox-checked.mat-accent .mat-checkbox-background,
       .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background
{
  background-color: rgb(27, 142, 241) !important;
}

/deep/ .mat-ripple-element {
  background: rgba(27, 142, 241, .4) !important;
}

Here the /deep/ is important otherwise it will not work. According to Angular documentation:

Component styles normally apply only to the HTML in the component's own template.

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.

The /deep/ combinator also has the aliases >>> , and ::ng-deep .

— https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Answer 3

Try to use .md-checkbox.md-checked Refer Checkbox Styling ,

:host /deep/ .md-checkbox.md-checked .md-icon {
   background-color:yellow!important;   
}

Answer 4

Try to add encapsulation: ViewEncapsulation.None to your component.ts file

and in css:

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background: yellow;
}