更改 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 添加自定义 class，按照 documentation

中所述将样式更改为输入

切换开关是通过在 label 标签上使用 ::before 和 ::after 创建的。因此，如果您将 div custom-styles 的包装器命名为 class，那么您的 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;   
}

Changing the color of a Clarity toggle switch