[FIXED] Change color of primeng input-switch

Issue

I have the following p-inputSwitch.

<p-inputSwitch class="ml-1 mr-1 align-middle"
               (onChange)="setDefaultValues($event)"
               [ngModel]="defaultValuesToggle">
</p-inputSwitch>
           

Is there a way to change the color from blue when selected? I have tried the following, but nothing changes the color:

.p-inputswitch {
    background: red !important;
}
.p-inputswitch .p-inputswitch-slider {
  background: red !important;
}

Solution

You need to add the "selected" state to the selector by adding the class p-inputswitch-checked to .p-inputswitch and also add ::ng-deep infront of the selector to penetrate View Encapsulation:

::ng-deep .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
  background: purple;
}

Answered By – Shai

Answer Checked By – Terry (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published