How to style a mat-checkbox properly

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?

Solution 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.

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

Solution 3

You can use ::ng-deep like below example.

::ng-deep mat-checkbox.yourcheckbox .mat-checkbox-frame{
   border: 0px;
}

Solution 4

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

Solution 5

::ng-deep .mat-checkbox .mat-checkbox-frame {
    border-color: #fa3131;
}

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

View more solutions

Comments

[Ian Young]

That removes the border. That is the opposite of what I need.

[mittal bhatt]

ok than use like below example /** No CSS for this example */ ::ng-deep .mat-checkbox .mat-checkbox-frame { border-color: violet; } ::ng-deep .mat-checkbox-checked .mat-checkbox-background { background-color: darkcyan !important; }

[Ian Young]

It did allow me to set a background colour and border, though not the problem of the border disappearing when the box is checked.