Changing CSS from Angular Material Checkbox

Question

can someone tell me, how I can change the colour of the round circle when you click the angular material checkbox. Shown in the following image (the pink circle)

Here is the link from the official webpage: https://material.angular.io/components/checkbox/overview

Thanks for the Help

This round circle is called ripple. Do you want to change the color of only on the checkbox ripple or all the ripples in the app? Or do you want to disable the ripple altogether? — FAISAL
– FAISAL, Commented Jun 11, 2018 at 7:23
actually, I want to change all ripple effects in the app. the earlier post helped me with changing the checkbox ripple .green-checkbox { .mat-ripple-element { background-color: $darkgreen !important; opacity: 0.5; } } i dont know, why its been deleted — Peter
– Peter, Commented Jun 11, 2018 at 8:10
@Peter I deleted my post because for some reason it was being downvoted. If it helped you, I will undelete it. — Aamir Khan
– Aamir Khan, Commented Jun 11, 2018 at 8:13

Aamir Khan · Accepted Answer · 2018-06-11 13:33:29Z

8

The checkbox (both the checkmark and the ripple), by default uses the accent color from your theme. You can change it to use the primary color by using the color = "primary" property on the element. If you want to use a custom color (i.e. not from the theme), you'd have to override the CSS manually or create a custom theme.

If you only want to override the color of the ripple, you can override the .mat-ripple-element class which is added on the generated ripple element whenever you click the checkbox. Add your desired styles to theme.scss.

.custom-ripple {
  .mat-ripple-element {
    background-color: rgba(100, 200, 50, 0.5) !important;
  }
}

Here's an example.

edited Jun 11, 2018 at 13:33

answered Jun 11, 2018 at 6:27

Aamir Khan

3,0312 gold badges27 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing CSS from Angular Material Checkbox

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related