Mehrere Kippschalter auf Seite CSS

Question

Ich versuche, mehrere toggle Schalter auf einer Seite neu zu erstellen, aber wenn ich einen neuen Schalter erstellen, funktioniert es nicht und es steuert den ersten Schalter, den ich erstellt habe. Der toggle Schalter, den ich versuche zu machen, ist wie ein Ein- und Ausschalter wie auf dem iPhone. Hier ist ein 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

Weil Sie die gleichen Klassen für beide anwenden, so dass, wenn Sie :checked verwenden, schieben Sie sie gerade die erste.

Assign-IDs zu jedem input

Hinweis

und Sie sind ein Schließen 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>