Укладка нескольких флажков с CSS не работает

Question

Я пытаюсь создать несколько флажков с CSS, но работает только один. Что не так в моем коде? Я хотел бы иметь уникальные идентификаторы для флажков, но CSS здесь, похоже, не позволяет.

демо: 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 должно быть уникальным, что означает, что вы можете использовать только определенный идентификатор один раз на странице. Classes, с другой стороны, может использоваться несколько раз на странице.

Вы должны будете использовать идентификаторы, чтобы ваш labels работал правильно, но каждый идентификатор должен отличаться от уникального. Я предлагаю структуру, как это:

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"> 

идентификатор должен быть уникальным

Я предлагаю вам проверить ваш html с помощью w3c validator. Вы заметили бы ошибку.

Просто замените свои идентификаторы уникальными значениями и примените свой стиль по-другому.

Answer 3

Проблема заключается в том, что ваш КСС классы для укладки, но у вас нет каких-либо классы в CSS, а вы есть идентификаторы классов вместо внесения.

Измените идентификаторы в своем html на классы, и это сработает.

.slideparam 

Стенды для класса

в то время как в вашем HTML есть только id="slideparam"