css - 更改清晰度切换开关的颜色

Question

我有一个带有.Net核心的Angular项目，我也在使用Clarity，我想知道是否有办法改变Clarity切换开关的颜色？

到目前为止我尝试过的代码不起作用：

 <input type="checkbox" formControlName="validateAll" Color="red" clrToggle />

---

 <input type="checkbox" formControlName="validateAll" style="background-color:red"  clrToggle />

---

<input type="checkbox" formControlName="validateAll" style="color:red"  clrToggle />

Answer 1

将自定义类添加到包装 div，将样式更改为输入，如文档中所述

拨动开关是通过在标签上使用::before和创建的。因此，如果您为 div 命名包装类，那么您的 css 应该如下所示：::afterlabelcustom-styles

.custom-styles input[type=checkbox]+label::before {
  border-color: blue;
  background-color: blue;   
}

并检查

.custom-styles input[type=checkbox]:checked+label::before {
  border-color: red;
  background-color: red;   
}