Styling multiple checkboxes with CSS is not working - css

Question

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.
demo: http://jsfiddle.net/JW3qf/65/
html:
<div class="slideparam">
<input type="checkbox" id="slideparam" value="1">
<label for="slideparam"></label>
</div>
<div class="slideparam">
<input type="checkbox" id="slideparam" value="1">
<label for="slideparam"></label>
</div>
css:
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;
}

Answer 1

IDs must be unique, meaning that you can only use a particular ID once on a page. Classes, on the other hand, can be used multiple times on a page.
You'll want to use IDs so that your labels work correctly, but make each ID different to keep it unique. I suggest a structure like this:
input[type=checkbox] {
visibility: hidden;
}
.slideparam {
position: relative;
width: 80px;
height: 26px;
background: #333;
margin: 20px auto;
border-radius: 50px;
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';
position: absolute;
right: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
color: #000;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255, 255, 255, .15);
}
.slideparam:before {
content: 'ON';
position: absolute;
left: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
color: #00bf00;
font-weight: bold;
}
.slideparam label {
display: block;
position: absolute;
top: 3px;
left: 3px;
width: 34px;
height: 20px;
border-radius: 50px;
transition: all .4s ease;
cursor: pointer;
z-index: 1;
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;
}
<div class="slideparam">
<input type="checkbox" id="slideparam_1" value="1" />
<label for="slideparam_1"></label>
</div>
<div class="slideparam">
<input type="checkbox" id="slideparam_2" value="2" />
<label for="slideparam_2"></label>
</div>
<div class="slideparam">
<input type="checkbox" id="slideparam_3" value="3" />
<label for="slideparam_3"></label>
</div>

Answer 2

<input type="checkbox" id="slideparam" value="1">
<input type="checkbox" id="slideparam" value="1">
id has to be UNIQUE
I suggest you to validate your html with w3c validator. You'd have noticed the error.
Just replace your ID's with unique values and apply your styling in another way.

Answer 3

The problem is that your css is styling classes, but you don't have any classes in your css, rather you have ids instad of classes.
Change the ids in your html to classes and it will work.
.slideparam
stands for class
while in your html there is only id="slideparam"