Change Checkbox Size in Angular Material Selection List

Change Checkbox Size in Angular Material Selection List



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


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



Checkmark improperly placed



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




1 Answer
1



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;





Wish there was a way to do it without having to manually adjust these separately but this certainly works, thanks!
– tgordon18
Aug 28 at 18:34





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.
– Richrd
Aug 28 at 18:37



transform: scale(0.5)






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-