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

Css – How to remove outside circle from material checkbox

My HTML

<mat-checkbox id="includeBoundingBoxWithImage"        
    [(ngModel)]="includeBoundingBoxWithImage" color="primary"></mat-checkbox>

I have tried below CSS but it does not remove the outside circle

.mdc-checkbox__ripple {
    display: none;
}
Tags:

3

Answers


  1. 0

    The ripple you’ve selected is the circle that is shown when you hover over the checkbox. The one that is visible when you click the checkbox has the following selector: .mat-mdc-checkbox-ripple, so to remove both, you can do:

    .mat-mdc-checkbox-ripple,
.mat-mdc-checkbox .mdc-checkbox__ripple {
  display: none;
}

    Tested on Angular material 17

    Login or Signup to reply.
  2. 0

    Please try below

    Workaround fix would be:
    .mat-ripple { display: none; }

    or .mat-checkbox-ripple only for checkbox

    Login or Signup to reply.
  3. 0

    You can use the below CSS, to apply based on the id field. you can also wrap the checkbox inside a div and add a class to scope the changes only to that checkbox!

    [ng-reflect-id='includeBoundingBoxWithImage'] .mdc-checkbox__ripple {
  display: none !important;
}

[ng-reflect-id='includeBoundingBoxWithImage']
  .mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator {
  display: none !important;
}

    stackblitz

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

Back To Top
Search