cssangularsassangular-materialangular-material-theming

How can I use an Angular Material chckbox without additional spacing?

I'm currently working with Angular Material and would like to know if there is a way to use the checkbox without the default spacing. I noticed that Angular Material's checkbox are surrounded by some spacing by default (as seen in the image). Is there an easy way to remove this spacing so that I can insert the checkbox directly into my content without additional spacing?

<mat-checkbox formControlName="rememberMe"><span class="remember-me">Remember me</span></mat-checkbox>

enter image description here

padding:0 did not help.

Also this did not work:

input[type="checkbox"] {
  width: 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

Thanks in advance for your assistance

Solution

  • We can use the below CSS

    The CSS focuses on removing the padding, height and width to the desired size and absolute positioning of the background also!

    ::ng-deep .custom-checkbox > div > div.mdc-checkbox {
  padding: 0px !important;
}

::ng-deep
  .custom-checkbox
  > div
  > div.mdc-checkbox
  > .mat-mdc-checkbox-touch-target,
::ng-deep
  .custom-checkbox
  > div
  > div.mdc-checkbox
  > .mdc-checkbox__native-control {
  height: 18px !important;
  width: 18px !important;
}

::ng-deep
  .custom-checkbox
  > div
  > div.mdc-checkbox
  > .mdc-checkbox__background {
  top: 0px !important;
  left: 0px !important;
}

    Stackblitz Demo