title: CSS: Change the background color of a toggle element when toggled
body: <p>This is my code to toggle an element </p>
  
  <pre><code>&lt;label style="float:right" class="toggle toggle-assertive"&gt;
               &lt;input type="checkbox" ng-model="checkModel"&gt;
               &lt;div class="track"&gt;
                 &lt;div class="handle"&gt;&lt;/div&gt; 
               &lt;/div&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>This is the output of the above code
  <a href="https://i.stack.imgur.com/ukSxV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ukSxV.png" alt="enter image description here"></a>
  When the checkbox is toggled, the background element changes to red as shown
  <a href="https://i.stack.imgur.com/qlSi2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qlSi2.png" alt="enter image description here"></a>
  Now I want the background to change to blue when toggled so I have this code</p>
  
  <pre><code>#trackBack {
  background-color:#0000FF;
  border:0;
  }
  </code></pre>
  
  <p>On applying the above css code the background changes to blue whether toggled or not. Shown in the below picture </p>
  
  <p><a href="https://i.stack.imgur.com/YREya.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YREya.png" alt="enter image description here"></a>
  My challenge now is how can I make the background blue only when toggled.
  Kindly assist</p>