How to set :disabled pseudo element/class on :before pseudo element
<p>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 <a href="https://jsfiddle.net/sachin8085/adm5t7rz/6/" rel="nofollow">https://jsfiddle.net/sachin8085/adm5t7rz/6/</a></p>

<pre><code>&lt;div&gt;
Step 1&gt; click on toggle button &lt;br /&gt;

step 2&gt; click on disable button &lt;br /&gt;

result &gt; Blue color of switch should change to gray when it get disabled.

&lt;/div&gt;
&lt;div&gt;



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

  &lt;div class="slider"&gt;&lt;/div&gt;
&lt;/label&gt;

&lt;div&gt;
  &lt;button class="btn btn-primary" id="btnDisabled" text="disable" onclick="ondisabledclick()"&gt; disable&lt;/button&gt;
&lt;/div&gt;
&lt;div id="demo"&gt;
  Sample
&lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>/* 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;
}
</code></pre>

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