Html Question posted in
Some basic documentation can be found here.

Html – How to customize the color of mat checkbox in mat select options

How to customize the color of mat checkboxes in mat select options as seen below

<mat-form-field appearance="fill" style="width:49%">
    <mat-label>Select Group</mat-label>
        <mat-select [(ngModel)]="groupNames" name="group" multiple>
            <mat-option *ngFor="let group of GroupList" [value]="groupName">
                {{groupName}}
            </mat-option>
        </mat-select>
</mat-form-field>

I tried inspecting the elements and styles in browser and there was this class

.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
    background-color: var(--mat-full-pseudo-checkbox-selected-icon-color);
    border-color: rgba(0, 0, 0, 0);
}

that was affecting the background color of the checkbox(which I want to customize) but when same class is over-rided in CSS file in my angular project, the changes are not reflecting

Tags:

2

Answers


  1. 0

    If you are using an earlier version of angular which has some other HTML. Just change the CSS styles to below. Applying the same concepts as the second part of this answer!

    .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked {
    background-color: red !important;
    border-color: yellow !important;
}

    If you want to override the styles inside a component you need to use ::ng-deep (Not Recommended) on the prefix of the class.

    ::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked {
    background-color: red !important;
    border-color: yellow !important;
}

    Stackblitz Demo

    Since ::ng-deep is Not Recommended, you can use a class to achieve the same thing.

    First we specify panelClass to give the dropdown a custom class.

    <mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select
    [formControl]="toppings"
    multiple
    [panelClass]="'custom-checkbox'"
  >
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">{{topping}}</mat-option>
    }
  </mat-select>
</mat-form-field>

    Then in the global styles, we can add the class.

    .custom-checkbox .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked {
  background-color: red !important;
  border-color: yellow !important;
}

    Stackblitz Demo

    Login or Signup to reply.
  2. 0

    Assuming you are using Angular Material 3, add the following entry to your style.scss file.

    <html>
    --mat-full-pseudo-checkbox-selected-icon-color: <your colour>;
</html>

    Good luck with your project.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search