Change Checkbox Size in Angular Material Selection List

user_4157821 0
Viewed 12569

Is it possible to change the size of the checkbox in an Angular Material Selection List? I've tried changing the size of the mat-pseudo-checkbox in CSS but that results in the checkmark not being placed properly:

mat-pseudo-checkbox {
  height: 10px;
  width: 10px;
}

Checkmark improperly placed

Is there another selector that I need to adjust to correct this?

angular-material checkbox css
3 Answers

With Angular 7 I succeeded with:

mat-checkbox ::ng-deep .mat-checkbox-inner-container {width: 30px;height: 30px;}
user_13699890

Yes, the checkmark is just a pseudo element within the checkbox. You can override it's styles the same way as with the box itself.

For your case with the 10px box size the following CSS would work (for other sizes the values need to be adjusted):

.mat-pseudo-checkbox-checked::after {
    top: 0px;
    left: -1px;
    width: 6px;
    height: 2px;
}
user_13114700

I was facing the similar issue and tried the below CSS, which seems to work in Angular 8:

::ng-deep .mat-checkbox .mat-checkbox-inner-container {
    width: 30px;
    height: 30px;
}

I have added a sample width and height; please customize these to what you need.

user_48875010
Related