使用CSS設置多個複選框不起作用

Question

我想使用CSS設置幾個複選框的樣式，但只有一個正在工作。我的代碼有什麼問題？我想爲複選框設置唯一的ID，但這裏的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必須是唯一的，這意味着您只能在頁面上使用一次特定的ID。另一方面，Classes可以在頁面上多次使用。

您將需要使用ID，以便您的labels正常工作，但使每個ID不同以保持唯一。我建議的結構是這樣的：

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必須是唯一的

我建議你用w3c validator驗證你的html。你會注意到這個錯誤。

只需將您的ID替換爲唯一值並以另一種方式應用您的樣式。

Answer 3

的問題是，你的CSS是造型類，但你沒有任何類在你的CSS，而你有IDS類instad。

將您的html中的id更改爲類，它將起作用。

.slideparam 

代表

類，而在你的HTML只有id="slideparam"