Q: How to set :disabled pseudo element/class on :before pseudo element I want to change color of my toggle button when it get disabled. I Implemented this toggle using :before fetaure of css . 
Code is present at https://jsfiddle.net/sachin8085/adm5t7rz/6/
<div>
Step 1> click on toggle button <br />

step 2> click on disable button <br />

result > Blue color of switch should change to gray when it get disabled.

</div>
<div>



<label class="toggleswitch" style="hidden: true" id="lblToggle">
  <input id="enableSN" name="enableSN" class="switch-input" type="checkbox" [(ngModel)]="appEnabled" (ngModelChange)="switchChange($event)">

  <div class="slider"></div>
</label>

<div>
  <button class="btn btn-primary" id="btnDisabled" text="disable" onclick="ondisabledclick()"> disable</button>
</div>
<div id="demo">
  Sample
</div>

</div>

CSS
/* The switch - the box around the slider */

.toggleswitch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */

.toggleswitch input {
  display: none;
}

Not able to find a way to set a background color property of :before element when its parent get disabled.

A: I dont know if it is what you looking for
.disabled .slider:before{
  background-color: red;
}
.disabled input:checked + .slider:before{
  background-color: green;
}

example: jsfiddle
And also if I'm correct you shouldn't use block elements (div) inside label, its wrong behaviour
https://stackoverflow.com/a/18609649/1121576
