Question

谢谢您的帮助。我正在尝试将垫子复选框的设计从正方形更改为圆形。但很难找到一种方法。

你能帮我吗？

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

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

Answer 1

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

添加边界半径

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

您还可以按照以下规则删除tick效果

/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

将复选框设计从正方形更改为圆形

1 个答案: