【问题标题】:Change the colour of the md-focused checkbox in angular material design更改角度材料设计中以 md 为中心的复选框的颜色
【发布时间】:2017-10-31 21:29:35
【问题描述】:

我正在使用 Angular Material 并且我一直使用 md-checkboxes 但是当我选中一个复选框并聚焦时,它会在复选框周围给我一个奇怪的粉红色圆形阴影(我只是希望能够更改颜色)

<md-checkbox class="gray md-default-theme md-checked" checked="checked">

// 当它被选中并成为焦点时,它会添加类'md-focused'并在复选框周围给出一个淡粉色圆圈

<md-checkbox class="gray md-default-theme md-checked md-focused" checked="checked">

谁能解释我如何通过 css 改变它来改变颜色?

【问题讨论】:

标签: css angularjs material-design angularjs-material


【解决方案1】:

您必须覆盖.md-focused .md-container:before,因为样式被添加到伪元素... (PLUNKER DEMO)

  • 覆盖所有复选框焦点:

    md-checkbox.md-focused .md-container:before {
        background-color: transparent !important;
    }
    
  • 仅覆盖某些复选框:

    HTML

    <md-checkbox class="md-checkbox-no-focused">
        Checkbox without focus
    </md-checkbox>
    

    CSS

    .md-checkbox-no-focused .md-container:before {
        background-color: transparent !important;
    }
    

【讨论】:

    猜你喜欢
    • 2021-02-09
    • 2020-08-05
    • 2019-02-28
    • 2016-05-04
    • 2023-03-21
    • 2018-05-09
    • 1970-01-01
    • 2017-08-02
    • 1970-01-01
    相关资源
    最近更新 更多