在角度材质设计中更改md-focused复选框的颜色

Question

我正在使用Angular Material并且我已经使用了md-checkboxes然而当我选中了一个复选框并且聚焦时它给了我一个奇怪的粉红色圆形阴影围绕复选框（我只是想能够改变颜色）

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

//选中此选项并进行重点关注时，会添加“专注于”的课程。 ＆安培;在复选框周围给出一个淡淡的粉红色圆圈

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