在 angular material 设计中更改 md-focused 复选框的颜色

Question

我正在使用 Angular Material 并且我在整个过程中都使用了 md-checkboxes 但是当我选中一个复选框并聚焦它时它会在复选框周围给我一个奇怪的粉红色圆形阴影（我只是想能够改变颜色）

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

// 当它被选中并处于焦点时，它会添加 class 'md-focused' 并在复选框周围给出一个淡淡的粉红色圆圈

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

任何人都可以解释我如何通过 css 改变它来改变颜色吗？

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