Angular Material设计复选框黑色前景色（符号颜色）

Question

我正在使用应用程序内的<mat-checkbox>...</mat-checkbox>组件，需要将符号（"勾" ✓）的颜色设置为黑色。我可以通过CSS设置背景颜色，但无法更改“前景”颜色。

代码：

my.ts
          <mat-checkbox name="{{field.name}}"
                        [ngModel]="field.valueChecked"
                        ...
                        [ngClass]="{
                 'mandatory': field.mandatory == true
                 ,'optional': field.mandatory == false
                 ,'checkbox' : true}"
                 >
          </mat-checkbox>


my.css
    .checkbox {
        background-color: #3197ee !important;
        color: #050911 !important;
    }

欢迎提供任何关于如何改变颜色的解决方案！

- Jaroslav

---

我猜你需要为你的主要和次要颜色创建一个新的自定义主题。 - Sarthak Aggarwal

Answer 1

试试这个

.mat-checkbox-checkmark-path {
    stroke: #000 !important;
}

或者

/deep/ .mat-checkbox-checkmark-path {
    stroke: #000 !important;
}

- Sunil Singh

---

第一个解决方案运行得非常完美！我不喜欢第二个，因为我读到“deep”正在被弃用，并且可能在某些浏览器上无法工作。谢谢！ - Jaroslav

太好了！是的，/deep/很快就会被弃用。 - Sunil Singh

适用于Angular 7，也适用于::ng-deep。 - ManuelTS

它可以与/deep/一起使用，但在自定义主题中无法使用><。 - mrroboaat

Answer 2

请尝试以下CSS代码。它会起作用的。

input[type="checkbox"]:checked + label::after {
   content: '';
   position: absolute;
   width: 1.2ex;
   height: 0.4ex;
   background: rgba(0, 0, 0, 0);
   top: 0.9ex;
   left: 0.4ex;
   border: 3px solid #000000;
   border-top: none;
   border-right: none;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

input[type="checkbox"] {
   line-height: 2.1ex;
}

input[type="checkbox"] {
    position: absolute;
    left: -999em;
}

input[type="checkbox"] + label {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

input[type="checkbox"] + label::before {
   content: "";
   display: inline-block;
   vertical-align: -25%;
   height: 2ex;
   width: 2ex;
   background-color: #3197ee;
   border: 1px solid rgb(166, 166, 166);
   border-radius: 4px;
   box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
   margin-right: 0.5em;
}

- stalinrajindian

---

我曾经使用过默认的HTML复选框（<input type="checkbox" ... >）来实现类似的解决方案，它可以正常工作，但是现在需要切换到Material Design复选框，这个解决方案对我来说不起作用。不管怎么说还是谢谢。 - Jaroslav

是的，正如我所说，对于<input type="checkbox" ... >它可以工作，但不适用于<mat-checkbox ... >复选框。 - Jaroslav