CODEWITHSUNDEEP
cssangularcheckboxsass
whereJERRY
whereJERRY

Reputation: 85

Change checkbox design from square to circle

Thank you for your help in advance. I'm trying to change the mat-checkbox design from square to circle. but is a little bit hard to find a way.

Can you help me??

I can change only the background with the code below.

mat-checkbox { 
  border-radius: 100%;
  color: rgb(0,178,0);
  /deep/ .mat-checkbox-background {
    background-color: rgb(0,178,0);
  }
  /deep/ &.mat-checkbox-focused {
    .mat-ink-ripple {
      background-color: rgba(0, 178, 0, .26);
    }
  }
}

Upvotes: 1

Views: 6067

Answers (1)

user184994
user184994

Reputation: 18281

Bear in mind, by doing so the component will look more like a radio button than a checkbox, so may provide a bad user experience. That said, you can add a border radius to mat-checkbox-frame and mat-checkbox-background

/deep/ .mat-checkbox-frame,
/deep/ .mat-checkbox-background {
    border-radius: 50% !important;
}

You can also remove the tick effect with the following rules

/deep/ .mat-checkbox-checked.mat-accent .mat-checkbox-background, 
/deep/ .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    margin: 4px;
}

/deep/ .mat-checkbox-background svg {
    display: none;
}

Here is an example

Upvotes: 4

Related Questions