html - How to set :disabled pseudo element/class on :before pseudo element -

i want change color of toggle button when disabled. implemented toggle using :before fetaure of css . code present @ 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 gray when 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

/* switch - box around slider */  .toggleswitch {   position: relative;   display: inline-block;   width: 60px;   height: 34px; }   /* hide default html checkbox */  .toggleswitch input {   display: none; } 

not able find way set background color property of :before element when parent disabled.

i dont know if looking for

.disabled .slider:before{   background-color: red; } .disabled input:checked + .slider:before{   background-color: green; } 

example: jsfiddle

and if i'm correct shouldn't use block elements (div) inside label, wrong behaviour

https://stackoverflow.com/a/18609649/1121576