How to style a mat-checkbox properly - css

Question

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?

Answer 1

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.

Answer 2

To style the non checked box:
.mat-checkbox-background{
background-color: transparent;
svg path{
fill: transparent;
}
.mat-checkbox-checkmark-path {
stroke:transparent;
//stroke is the checked mark only
}
}
To style the checked box:
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: #2cc3f8 !important;
svg path {
fill: #2cc3f8 !important;
}
}

Answer 3

Put this in your style.css file, I have kept bg color red but you can change accordingly:
.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: #d71e2b;
}

Answer 4

You can use ::ng-deep like below example.
::ng-deep mat-checkbox.yourcheckbox .mat-checkbox-frame{
border: 0px;
}

Answer 5

i might be late but try using this =, make some changes according to you
::ng-deep .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #437891 !important;
}

Answer 6

::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: #fa3131;
}
::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background-color: #fa3131 !important;
}

Answer 7

this worked for me:
::ng-deep .mat-checkbox {
margin-right: 8px !important;
}

Answer 8

To style the checked box, this worked for me:
mat-checkbox.mat-checkbox.mat-checkbox-checked label > span.mat-checkbox-inner-container > span.mat-checkbox-background > svg.mat-checkbox-checkmark {
/* MY STYLES HERE */
}
I placed it at the bottom of the global styles.css and decorated the various styles with !important

Answer 9

To have a blue tick on a white background when checked and a white border when not checked, the following worked for me (knowing ng-deep is deprecated):
:host ::ng-deep {
.mat-checkbox .mat-checkbox-frame {
border-color: white !important;
}
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: white !important;
svg path {
stroke: blue !important;
}
}
}

Answer 10

Angular 13 with Material 13-
<mat-checkbox color="accent" [(ngModel)]="node. Checked" (change)="checkIndeterminate(node, $event)">
{{node.name}}
</mat-checkbox>
Added this to my styles.css:
.mat-checkbox.mat-accent .mat-checkbox-frame { border-color: black !important }
.mat-checkbox.mat-accent .mat-checkbox-background { background-color: rgba(0,0,0,0); }
.mat-checkbox.mat-accent .mat-checkbox-checkmark-path { stroke: black !important }
Result: white checkbox with black border when unchecked, white checkbox with black border and black checkmark when checked.