将复选框设计从正方形更改为圆形 [英] 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.

你能帮我吗？

我只能使用以下代码更改背景。

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);
    }
  }
}

推荐答案

请记住，这样做会使该组件看起来更像是一个单选按钮，而不是复选框，因此可能会带来不良的用户体验。也就是说，您可以为 mat-checkbox-frame 和 mat-checkbox-background

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

这篇关于将复选框设计从正方形更改为圆形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！