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

【问题标题】：Change checkbox design from square to circle将复选框设计从方形更改为圆形
【发布时间】：2019-01-30 11:14:03
【问题描述】：

提前感谢您的帮助。我正在尝试将 mat-checkbox 设计从方形更改为圆形。但是有点难找方法。

你能帮帮我吗？

我只能用下面的代码改变背景。

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

【问题讨论】：

标签： css angular checkbox sass

【解决方案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

【讨论】：

谢谢！！但我怎样才能改变检查的效果？从 (v) 到 (o)??再次感谢你
我刚刚更新了答案和示例，这是你想要的吗？
非常感谢。但实际上，我想让复选框设计看起来像一个单选按钮。当我选中复选框按钮时，它从 () -> (v) 变为。但我想把它从（）->（O）。谢谢！！！
抱歉，刚刚又更新了。试试看。话虽如此，如果您确实想要一个单选按钮，那么使用单选按钮会更容易吗？
@이상현 如果这解决了您的问题，请使用绿色对勾按钮将答案标记为已接受。这样，其他有相同问题的人就可以找到解决方案。谢谢