Change the colour of the md-focused checkbox in angular material design

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