[FIXED] Change color of primeng input-switch


I have the following p-inputSwitch.

<p-inputSwitch class="ml-1 mr-1 align-middle"

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;


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