css - 更改 Clarity 拨动开关的颜色

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，将样式更改为输入，如 documentation 中所述

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

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