頁面上的多個撥動開關CSS

Question

我試圖在一個頁面上重新創建多個toggle開關，但當我創建一個新開關時，它不起作用，它控制着我創建的第一個開關。我想要的toggle開關就像iPhone上的開關開關一樣。這裏是一個fiddle

.switch { 
 
    font: 16px"adiHaus-Bold", Arial, sans-serif; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
    border-top: #CCC solid 1px; 
 
    border-bottom: #EEE solid 1px; 
 
    border-right: #ddd solid 1px; 
 
    border-left: #ddd solid 1px; 
 
    border-radius: 2px; 
 
    height: 40px; 
 
    width: 130px; 
 
    margin: .2em; 
 
    @include border-radius(3px); 
 
    @include background-clip(padding-box); 
 
    background-color: #EFEFEF; 
 
    @include background-image(linear-gradient(bottom, rgba(255, 255, 255, .07) 0%, rgba(0, 0, 0, .07) 100%)); 
 
} 
 
.switch-label { 
 
    position: relative; 
 
    z-index: 2; 
 
    float: left; 
 
    width: 63px; 
 
    line-height: 42px; 
 
    font-size: 16px; 
 
    letter-spacing: 0; 
 
    color: #CDCDCD; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.switch-label-off { 
 
    text-shadow: 0px 1px 0px #FFFFFF; 
 
} 
 
.switch-label-on { 
 
    text-shadow: 0px 1px 0px #FFFFFF; 
 
} 
 
.switch-input { 
 
    display: none; 
 
} 
 
.switch-input:checked + .switch-label { 
 
    color: #000; 
 
    font-weight: bold; 
 
    -webkit-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -moz-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -ms-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -o-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -ms-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
} 
 
.switch-input:checked + .switch-label-on ~ .switch-selection { 
 
    left: 65px; 
 
} 
 
.switch-selection { 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 63px; 
 
    height: 38px; 
 
    @include border-radius(2px); 
 
    @include background-clip(padding-box); 
 
    background-color: #ffffff; 
 
    -webkit-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -moz-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -ms-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -o-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -ms-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
} 
 
label, 
 
.form-label-text { 
 
    display: inline-block; 
 
    margin-right: 0 !important; 
 
    vertical-align: middle; 
 
}

<span class="form-title">Hand:</span> 
 
<div class="switch"> 
 
    <input type="radio" class="switch-input" name="view" value="one" id="one" checked> 
 
    <label for="one" class="switch-label switch-label-off">L</label> 
 
    <input type="radio" class="switch-input" name="view" value="two" id="two"> 
 
    <label for="two" class="switch-label switch-label-on">R</label> 
 
    <span class="switch-selection"></span> 
 
</div>

Answer 1

因爲你所申請的兩個相同的類，所以當你使用:checked，它只會在第一次滑動。

分配的ID給每個input

注意

而你缺少一個右div

.switch { 
 
    font: 16px"adiHaus-Bold", Arial, sans-serif; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
    border-top: #CCC solid 1px; 
 
    border-bottom: #EEE solid 1px; 
 
    border-right: #ddd solid 1px; 
 
    border-left: #ddd solid 1px; 
 
    border-radius: 2px; 
 
    height: 40px; 
 
    width: 130px; 
 
    margin: .2em; 
 
    border-radius:3px; 
 
    background-clip:padding-box; 
 
    background-color: #EFEFEF; 
 
    background-image:linear-gradient(bottom, rgba(255, 255, 255, .07) 0%, rgba(0, 0, 0, .07) 100%); 
 
} 
 
.switch-label { 
 
    position: relative; 
 
    z-index: 2; 
 
    float: left; 
 
    width: 63px; 
 
    line-height: 42px; 
 
    font-size: 16px; 
 
    letter-spacing: 0; 
 
    color: #CDCDCD; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.switch-label-off { 
 
    text-shadow: 0px 1px 0px #FFFFFF; 
 
} 
 
.switch-label-on { 
 
    text-shadow: 0px 1px 0px #FFFFFF; 
 
} 
 
.switch-input { 
 
    display: none; 
 
} 
 
#one:checked + .switch-label, 
 
#three:checked + .switch-label { 
 
    color: #000; 
 
    font-weight: bold; 
 
    -webkit-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -moz-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -ms-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -o-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -ms-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
} 
 
#one ~.switch-input:checked + .switch-label-on ~ .switch-selection, 
 
#three ~.switch-input:checked + .switch-label-on ~ .switch-selection { 
 
    left: 65px; 
 
} 
 
.switch-selection { 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 63px; 
 
    height: 38px; 
 
    border-radius:2px; 
 
    background-clip:padding-box; 
 
    background-color: #ffffff; 
 
    -webkit-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -moz-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -ms-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -o-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -ms-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
    transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); 
 
} 
 
label, 
 
.form-label-text { 
 
    display: inline-block; 
 
    margin-right: 0 !important; 
 
    vertical-align: middle; 
 
}

<span class="form-title">Hand:</span> 
 
<div class="switch"> 
 
    <input type="radio" class="switch-input" name="view" value="one" id="one" checked> 
 
    <label for="one" class="switch-label switch-label-off">L</label> 
 
    <input type="radio" class="switch-input" name="view" value="two" id="two"> 
 
    <label for="two" class="switch-label switch-label-on">R</label> 
 
    <span class="switch-selection"></span> 
 
</div> 
 
<hr /> 
 

 
<span class="form-title">Hand:</span> 
 
<div class="switch"> 
 
    <input type="radio" class="switch-input" name="view" value="three" id="three" checked> 
 
    <label for="three" class="switch-label switch-label-off">L</label> 
 
    <input type="radio" class="switch-input" name="view" value="four" id="four"> 
 
    <label for="four" class="switch-label switch-label-on">R</label> 
 
    <span class="switch-selection"></span> 
 
</div>