CSS: Change the background color of a toggle element when toggled
<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>