title: Styling multiple checkboxes with CSS is not working
body: <p>I'm trying to style several checkbox with CSS, but only one is working. What is wrong in my code? I'd like to have unique ids for the checkboxes, but the CSS here doesn't seem to allow it.</p>
  
  <p>demo: <a href="http://jsfiddle.net/JW3qf/65/" rel="nofollow">http://jsfiddle.net/JW3qf/65/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="slideparam"&gt;
          &lt;input type="checkbox" id="slideparam" value="1"&gt;
          &lt;label for="slideparam"&gt;&lt;/label&gt;
          &lt;/div&gt;
  
      &lt;div class="slideparam"&gt;
          &lt;input type="checkbox" id="slideparam" value="1"&gt;
          &lt;label for="slideparam"&gt;&lt;/label&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>input[type=checkbox] {
      visibility: hidden;
  }
  
  
  
  /* SLIDE THREE */
  .slideparam {
      width: 80px;
      height: 26px;
      background: #333;
      margin: 20px auto;
  
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
      position: relative;
  
      -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
      -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
      box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  }
  
  .slideparam:after {
      content: 'OFF';
      font: 12px/26px Arial, sans-serif;
      color: #000;
      position: absolute;
      right: 10px;
      z-index: 0;
      font-weight: bold;
      text-shadow: 1px 1px 0px rgba(255,255,255,.15);
  }
  
  .slideparam:before {
      content: 'ON';
      font: 12px/26px Arial, sans-serif;
      color: #00bf00;
      position: absolute;
      left: 10px;
      z-index: 0;
      font-weight: bold;
  }
  
  .slideparam label {
      display: block;
      width: 34px;
      height: 20px;
  
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
  
      -webkit-transition: all .4s ease;
      -moz-transition: all .4s ease;
      -o-transition: all .4s ease;
      -ms-transition: all .4s ease;
      transition: all .4s ease;
      cursor: pointer;
      position: absolute;
      top: 3px;
      left: 3px;
      z-index: 1;
  
      -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
      -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
      box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
      background: #fcfff4;
  
      background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
  }
  
  .slideparam input[type=checkbox]:checked + label {
      left: 43px;
  }
  </code></pre>