【问题标题】: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-framemat-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)。谢谢!!!
    • 抱歉,刚刚又更新了。试试看。话虽如此,如果您确实想要一个单选按钮,那么使用单选按钮会更容易吗?
    • @이상현 如果这解决了您的问题,请使用绿色对勾按钮将答案标记为已接受。这样,其他有相同问题的人就可以找到解决方案。谢谢
    猜你喜欢
    • 1970-01-01
    • 2015-06-30
    • 1970-01-01
    • 2014-04-09
    • 1970-01-01
    • 2016-06-23
    • 2015-07-26
    • 1970-01-01
    • 2020-07-11
    相关资源
    最近更新 更多