Изменение цвета тумблера Clarity

Question

У меня есть проект Angular с ядром .Net, и я также использую 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 и ::afterна теге label.Так что если вы называете свой класс-оболочку для 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;   
}