如何正确设置 mat-checkbox 的样式
How to style a mat-checkbox properly
我正在尝试根据以下要求设置垫子复选框 (material2) 的样式:
始终可见的黑色边框(无论选中状态如何)(#0000000)
选中后,"tick" 将为白色 (#ffffff),背景为彩色(蓝绿色)(边框仍然可见)
未选中时,复选框的背景(边框内)应为灰白色 (#dddddd)。
到目前为止,我已经能够设置边框颜色,但是在检查时,它消失了,在蓝绿色后面
我可以设置未选中的背景颜色,但同样,当我这样做时黑色边框消失了。如果我去掉这个设置,边框出现了,但是背景颜色不对。
我设置的scss属性如下:
::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
}
看来无论我将背景设置成什么,都会覆盖边框样式。此外,当我更改复选框的状态时,黑色边框会短暂出现,然后再次消失。我如何满足这些要求?
您可以像下面的例子那样使用 ::ng-deep。
::ng-deep mat-checkbox.yourcheckbox .mat-checkbox-frame{
border: 0px;
}
我意识到 angular 复选框是分层绘制的,最后绘制 "tick" 层,位于黑色边框的顶部。
// 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;
}
通过减小前层的大小并稍微移动它,边框仍然可见。
我可能会迟到但是尝试使用这个=,根据您的情况进行一些更改
::ng-deep .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #437891 !important;
}
这对我有用:
::ng-deep .mat-checkbox {
margin-right: 8px !important;
}
将其放入您的 style.css 文件中,我将 bg 颜色保留为红色,但您可以相应地进行更改:
.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: #d71e2b;
}
设置非复选框的样式:
.mat-checkbox-background{
background-color: transparent;
svg path{
fill: transparent;
}
.mat-checkbox-checkmark-path {
stroke:transparent;
//stroke is the checked mark only
}
}
设置复选框样式:
.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;
}
}
要设置复选框的样式,这对我有用:
mat-checkbox.mat-checkbox.mat-checkbox-checked label > span.mat-checkbox-inner-container > span.mat-checkbox-background > svg.mat-checkbox-checkmark {
/* MY STYLES HERE */
}
我放在了全局的底部styles.css,装饰了各种样式!important
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: #fa3131;
}
::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background-color: #fa3131 !important;
}
我正在尝试根据以下要求设置垫子复选框 (material2) 的样式:
始终可见的黑色边框(无论选中状态如何)(#0000000)
选中后,"tick" 将为白色 (#ffffff),背景为彩色(蓝绿色)(边框仍然可见)
未选中时,复选框的背景(边框内)应为灰白色 (#dddddd)。
到目前为止,我已经能够设置边框颜色,但是在检查时,它消失了,在蓝绿色后面
我可以设置未选中的背景颜色,但同样,当我这样做时黑色边框消失了。如果我去掉这个设置,边框出现了,但是背景颜色不对。
我设置的scss属性如下:
::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
}
看来无论我将背景设置成什么,都会覆盖边框样式。此外,当我更改复选框的状态时,黑色边框会短暂出现,然后再次消失。我如何满足这些要求?
您可以像下面的例子那样使用 ::ng-deep。
::ng-deep mat-checkbox.yourcheckbox .mat-checkbox-frame{
border: 0px;
}
我意识到 angular 复选框是分层绘制的,最后绘制 "tick" 层,位于黑色边框的顶部。
// 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;
}
通过减小前层的大小并稍微移动它,边框仍然可见。
我可能会迟到但是尝试使用这个=,根据您的情况进行一些更改
::ng-deep .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #437891 !important;
}
这对我有用:
::ng-deep .mat-checkbox {
margin-right: 8px !important;
}
将其放入您的 style.css 文件中,我将 bg 颜色保留为红色,但您可以相应地进行更改:
.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: #d71e2b;
}
设置非复选框的样式:
.mat-checkbox-background{
background-color: transparent;
svg path{
fill: transparent;
}
.mat-checkbox-checkmark-path {
stroke:transparent;
//stroke is the checked mark only
}
}
设置复选框样式:
.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;
}
}
要设置复选框的样式,这对我有用:
mat-checkbox.mat-checkbox.mat-checkbox-checked label > span.mat-checkbox-inner-container > span.mat-checkbox-background > svg.mat-checkbox-checkmark {
/* MY STYLES HERE */
}
我放在了全局的底部styles.css,装饰了各种样式!important
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: #fa3131;
}
::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background-color: #fa3131 !important;
}