title: How to change the CSS of the active toggle button using pseudo CSS transitions
body: <p>I have multiple toggle buttons on my web page. I am using <code>checkbox</code> input control with some CSS to get a material toggle button design. When I change the state of any of the toggle buttons, the CSS effects are reflected on the first toggle. How can i apply the effect on just the active toggle. </p>
  
  <pre><code>&lt;div&gt;
    &lt;div class="material-toggle"&gt;
      &lt;input type="checkbox" id="toggle" name="toggle" checked=true class="switch" /&gt;
      &lt;label for="toggle" class=""&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="material-toggle"&gt;
      &lt;input type="checkbox" id="toggle" name="toggle" checked=true class="switch" /&gt;
      &lt;label for="toggle" class=""&gt;&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS I am using.</p>
  
  <pre><code>.material-toggle {
    height: 22px;
    width: 40px;
    margin: 12px;
  }
  
  .material-toggle input:empty {
      margin-left: -9999px;
  }
  
  .material-toggle input:empty ~ label {
      position: relative;
      float: left;
      width: 150px;
      cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .material-toggle input:empty ~ label:before, 
  .material-toggle input:empty ~ label:after {
    position: absolute;
      display: block;
    content: ' ';
    -webkit-transition: all 250ms cubic-bezier(.4,0,.2,1);
    transition: all 250ms cubic-bezier(.4,0,.2,1);
  }
  
  .material-toggle input:empty ~ label:before {
      top: 3px;
      left: 0px;
      width: 32px;
      height: 13px;
      border-radius: 12px;
      background-color: #bdbdbd;
  }
  
  input.switch:empty ~ label:after {
      top: -1px;
      left: -9px;
      width: 1.4em;
      height: 8px;
      bottom: 0.1em;
      margin-left: 0.1em;
      background-color: #fff;
      border-radius: 50%;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      border: solid 2px;
      border-color: #fff;
      box-shadow: 0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);
  }
  
  .material-toggle input:checked ~ label:before {
      background-color: #1e88e5;
  }
  
  .material-toggle input:checked ~ label:after {
      left: 15px;
    background-color: #1565c0;
    border-color: #1565c0;
  }
  </code></pre>
  
  <p>I am attaching a <a href="http://codepen.io/maskaravivek/pen/yaOBoX" rel="nofollow">codepen</a> for the same. </p>