jeudi 21 mai 2020

how to change height and width of angular material checkbox

I have an angular material checkbox inside my div like

  <div class="select" fxLayoutAlign="end center">
    <mat-checkbox #checkboxes color="primary"></mat-checkbox>
  </div>

here I want to increase width and height of the checkbox.

as in the below checkbox the default height and width are 16px. I want to increase that one without using ng-deep because it is deprecated can we increase the height and width?

enter image description here

I tried with selection inside css like

.select  {
  .mat-checkbox {
    .mat-checkbox-layout {
      .mat-checkbox-inner-container {
        height: 18px;
        width: 18px;
      }
    }
  }
}

and

   .select > mat-checkbox > .mat-checkbox-layout > .mat-checkbox-inner-container 
      {
        height: 18px;
        width: 18px;
      }

but it didn't work for me can any one please help on it.




Aucun commentaire:

Enregistrer un commentaire