title: How to set :disabled pseudo element/class on :before pseudo element
body: <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>