Scss change color of mat-checkbox if disabled

Question

In my scss file for my component I have this to set the background color for mat-checkbox when checked:

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

Now I need to set a different color for checkboxes when they are selected but disabled (some data have to be always selected and their checkbox disabled to prevent unchecking). How do I specify the disabled property with /deep/ in scss?

Leslileslie

Answer 1

I think this should work:

/deep/.mat-checkbox-checked.mat-accent.mat-checkbox-disabled .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: (your color);
}

Pluri

Answer 2

Usr's answer put me on the right track but /deep/ would not work for me so I had to change it to use the ::ng-deep pseudo class. Note that according to the documentation, this will make the style global. Also, in my case, I had to use !important to get the style to take effect.

::ng-deep.mat-checkbox-checked.mat-accent.mat-checkbox-disabled .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #ccc !important;
}

Demandant

Answer 3

That works for me:

<mat-checkbox class="my_checkbox" [disabled]="true" [checked]="true"></mat-checkbox>

<mat-checkbox class="my_checkbox" [disabled]="true" [checked]="false"></mat-checkbox>

And scss for unchecked and checked:

my_checkbox {
  :not(.mat-checkbox-checked) {
    .mat-checkbox-frame {
      // Your style
    }
  }
  
  &.mat-checkbox-checked {
    .mat-checkbox-frame {
      // Your style
    }
  

Kliman

Answer 4

::ng-deep .mat-checkbox-checked.mat-accent.mat-checkbox-disabled .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color:#d9d9d9 !important;
}

Cyanosis

for enabled checkbox: – Cyanosis

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { background-color: #d13730 !important; border-radius: 0.25em; } – Cyanosis