Change Checkbox Size in Angular Material Selection List

Question

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

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

Jangro

Answer 1

With Angular 7 I succeeded with:

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

Tillage

Answer 2

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

Impetuous

Wish there was a way to do it without having to manually adjust these separately but this certainly works, thanks! – Jangro

One way would be to just add transform: scale(0.5) to the entire element. The problem is that even though it would look smaller, it would still take up the same space as before the scaling. – Impetuous

Answer 3

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.

Minuscule

Sadly, with newer Angular versions ng-deep is deprecated. Any idea how to achieve it without? – Cannabin

Answer 4

Setting those 2 variables in an scss file worked for me :

--mdc-checkbox-state-layer-size: 26px;
--mdc-checkbox-state-size: 16px;

Vichy

Answer 5

Works with 17.0.3

this affects the https://material.angular.io/components/checkbox

"* 2" - this is your value, how many times to increase

the value of how many times to increase should be the same for: /* from angular material: --mdc-checkbox-state-layer-size and --mdc-checkbox-state-size

/* from angular material: --mdc-checkbox-state-layer-size */
/* custom for your convenience: --mdc-checkbox-state-size */

:root {
    --mdc-checkbox-state-layer-size: calc(40px * 2);
    --mdc-checkbox-state-size: calc(18px * 2);
}

.mdc-checkbox {
    flex: 0 0 var(--mdc-checkbox-state-size) !important;
    width: var(--mdc-checkbox-state-size) !important;
    height: var(--mdc-checkbox-state-size) !important;
    padding: calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-size)) / 2) !important;
}

.mat-mdc-checkbox-touch-target {
    width: calc(var(--mdc-checkbox-state-layer-size) + 8) !important;
    height: calc(var(--mdc-checkbox-state-layer-size) + 8) !important;
}

.mdc-checkbox .mdc-checkbox__background {
    top: calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-size)) / 2) !important;
    left: calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-size)) / 2) !important;
    width: var(--mdc-checkbox-state-size) !important;
    height: var(--mdc-checkbox-state-size) !important;
}

Cutty