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

Question

I am using Angular Material and I have used md-checkboxes throughout however when I have a checkbox checked and focused it gives me a strange pink circular shadow around the checkbox (I just want to be able to change the colour)

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

// When this is checked and in focus it adds the class 'md-focused' & gives this a faint pink circle around the checkbox

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

Can anyone explain how I alter this to change the colour via css?

Answer 1

You have to override .md-focused .md-container:before because the style is added to a pseudo-element... ( PLUNKER DEMO )

• To override all checkboxes focus:

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

• To override just certain checkboxes:

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