CODEWITHSUNDEEP
angularangular-materialangular6angular-material-6
musigh
musigh

Reputation: 175

change checkbox color in angular material

I'm using angular material(6.4.7). I was using select and I want to change the color of select checkbox. I have tried /deep/ and ::ng-deep but no success. I think, I am using it in wrong way for these checkbox.

Here is the stackblitz link

Upvotes: 0

Views: 7245

Answers (2)

Prasun Guchhait
Prasun Guchhait

Reputation: 11

I know it was a bit late for my answer but this works for me the best

// for color when checkbox is checked 
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background
  background-color: orange;
}

::ng-deep .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: orange;
}

//to change the border color 
::ng-deep .mat-checkbox-frame{
  border-color: rgb(75, 75, 75, 0.7);
}

Upvotes: 1

Marshal
Marshal

Reputation: 11081

adding this to the select-multiple-example.css works in the stack-blitz link

::ng-deep .mat-primary .mat-pseudo-checkbox-checked {
    background: red;
}

Upvotes: 4

Related Questions