Изменение цвета переключателя четкости

#css #angular #clarity

#css #angular #четкость

Вопрос:

У меня есть проект Angular с.Net core и я также использую 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 />
  

Ответ №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;   
}