更改角度材料設計中 md-focused 復選框的顏色

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