CODEWITHSUNDEEP
cssangularclarity
A. Kriel
A. Kriel

Reputation: 260

Changing the color of a Clarity toggle switch

I have a Angular project with .Net core and I'm using Clarity as well, I was wondering if there is a way to change the color of a Clarity toggle switch?

my code that I've tried so far which was not working:

 <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 />

Upvotes: 2

Views: 1206

Answers (1)

k.s.
k.s.

Reputation: 3004

Add a custom class to the wrapping div, change the styles to the input as it's said in the documentation

The toggle switch is created by using ::before and ::after on the label tag. So if you name your wrapper class for the div custom-styles then your css should look like this: 

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

and for checked

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

Upvotes: 1

Related Questions