Question

我正在尝试根据以下要求设置垫子复选框（material2）的样式：

始终可见的黑色边框（无论是否处于选中状态）（＃0000000）

选中后，“勾号”将为白色（#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
}

无论我将背景设置为什么，似乎都会覆盖边框样式。此外，当我更改复选框的状态时，黑色边框会短暂出现，然后再次消失。如何满足这些要求？

Answer 1

我意识到有角度的复选框是分层绘制的，最后在黑色边框的顶部绘制了“刻度”层。

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

通过减小前层的大小并将其稍微移动，边框仍然可见。

Answer 2

您可以使用 :: ng-deep ，如下例所示。

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

Answer 3

我可能来晚了，但是请尝试使用此=，根据您的情况进行一些更改

::ng-deep .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #437891 !important;

}

Answer 4

将此内容放入您的style.css文件中，我将bg颜色保持为红色，但是您可以进行相应的更改：

.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #d71e2b;
}

Answer 5

这对我有用：

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

Answer 6

要设置非复选框的样式：

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

如何正确设置垫子复选框的样式

6 个答案: