How to style a mat-checkbox properly

Issue

I am attempting to style a mat-checkbox (material2) according to the following requirements:

A black, always visible border (regardless of checked status) (#0000000)

When checked, the "tick" will be white(#ffffff), on a coloured(teal) background (border still visible)

When unchecked, the background(inside the border) of the checkbox should be off-white (#dddddd).

So far, I have been able to set the border color, but when checked, it disappears, behind the teal color

I can set the unchecked background color, but again, the black border disappears when I do this. If I remove this setting, the border appears, but the background color is wrong.

The scss properties I am setting are as follows:

::ng-deep .mat-checkbox .mat-checkbox-frame {
    border-color: mat-color($darkPrimary, darker); //black
  }

::ng-deep .mat-checkbox-background {
    background-color: mat-color($darkPrimary, 200); //off-white
}

It seems that whatever I set the background as, overwrites the border style. Additionally, when I change the state of the checkbox, the black border briefly appears, then disappears again. How do I fulfil these requirements?

Solution

I realised that angular check-boxes are drawn in layers, with the "tick" layer drawn last, over the top of the black border.

// Background border
.mat-checkbox .mat-checkbox-frame {
    border-color: black;
    background-color: #dddddd
}

.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    margin-top: 1px;
    margin-left: 1px;
    width: 18px;
    height: 18px;
}

By reducing the front layers' size, and shifting it a little, the border remains visible.

Answered By - Ian Young