更改角度材料设计中以 md 为中心的复选框的颜色

Question

我正在使用 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 改变它来改变颜色？

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