CODEWITHSUNDEEP
cssangularangular-material
Pankaj Vanjara
Pankaj Vanjara

Reputation: 21

Can we change border color of mat-checkbox in angular?

In my project black theme we are using so, need to show checkbox border color with white border. But, css is not working in checkbox and border color is not changing.

Is there any way to change the border color of mat-checkbox? I am using angular material checkbox that link I have written below.

Checkbox Image

Angular material checkbox

Upvotes: 0

Views: 586

Answers (2)

codewithharshad
codewithharshad

Reputation: 361

::ng-deep .custom-checkbox .mat-checkbox-frame {
  border-color: #ff0000 !important;  /* Change this to the desired color */
}


<mat-checkbox
  class="custom-checkbox"
  color="primary"
>
  Check me!</mat-checkbox
>

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 57521

The below CSS seems to do the job, kindly change it based on your requirements!

.mdc-checkbox
  .mdc-checkbox__native-control:enabled
  ~ .mdc-checkbox__background {
  border-color: red !important;
  background-color: transparent;
}

stackblitz

Upvotes: 2

Related Questions