'How to style a mat-checkbox properly

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?

cssangulartypescriptangular-material2


Solution 1:[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:[2]

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

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

Solution 3:[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;
}

Solution 4:[4]

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 5:[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;

}

Solution 6:[6]

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

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

enter image description here

Solution 7:[7]

this worked for me:

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

Solution 8:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ian Young
Solution 2 Tân
Solution 3 alexortizl
Solution 4 sɐunıɔןɐqɐp
Solution 5 Flash Noob
Solution 6 M Komaei
Solution 7 Nick
Solution 8 StackOverflowUser

Related Questions