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