I am using Angular Material 2 and I am trying to apply css on md-checkbox. So far I managed to change background color, but there is no documentation on how to apply on border color.
My code for height-width:
:host /deep/ .mat-checkbox-inner-container{
height:15px;
width:15px;
}
code for background color on check:
:host /deep/ .mat-checkbox-checked .mat-checkbox-background {
background-color: #72addc;
}
but still cannot apply on border color.
Any help is welcome!
For Angular 5+ version
/deep/ .mat-checkbox-frame {
border-color: grey
}
You can learn more about styling components here https://angular.io/guide/component-styles
For Angular 8
::ng-deep .mat-checkbox-frame {
border-color: white
}
I like to add that "/deep/" is deprecated Now. [from version 8] use "::ng-deep" instead of "/deep/"
First time I removed ":host" but after removing it did not work properly. So I added it again.
CSS Using for Border Color:
:host ::ng-deep .mat-checkbox-frame {
border-color: white
}
CSS Using for Background color change:
:host ::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background-color: #01ADE4;
}