Optionsfeld Option

Question

Ich arbeite an den Radiobuttons, ich habe etwas von Google-Hilfe entworfen, aber in diesem fiddle werden Sie sehen, dass beide überprüft werden, wenn die Seite geladen wird, habe ich die Option nur mit radio1-Taste aktiviert. Ich muss es ändern, dass die Seite load radio1button aktiviert ist und radio2 button nicht aktiviert ist.

Wenn Sie auf die zweite Schaltfläche klicken, werden Sie sehen, dass die Schaltfläche 1 deaktiviert ist, aber die Schaltfläche 2 bleibt aktiviert, jede Lösung?

<input type="radio" name="radio" id="radio1" class="radio" checked/> 
<label for="radio1">Now</label> 



<input type="radio" name="radio" id="radio2" class="radio"/> 
<label for="radio2">Later</label> 

<style> 
label { 
    width: 150px; 
    border-radius: 3px; 
    border: 1px solid #D1D3D4 
} 

/* hide input */ 
input.radio:empty { 
margin-left: -999px; 
} 

/* style label */ 
input.radio:empty ~ label { 
position: relative; 
float: left; 
line-height: 2.5em; 
text-indent: 3.25em; 
margin-top: 2em; 
margin-left: 2em; 
cursor: pointer; 
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
} 

input.radio:empty ~ label:before { 
position: absolute; 
display: block; 
top: 0; 
bottom: 0; 
left: 0; 
content: ''; 
width: 2.5em; 
background: #D1D3D4; 
border-radius: 3px 0 0 3px; 
} 

/* toggle hover */ 
input.radio:hover:not(:checked) ~ label:before { 
content:'\2714'; 
text-indent: .9em; 
color: #C2C2C2; 
} 

input.radio:hover:not(:checked) ~ label { 
color: #888; 
} 

/* toggle on */ 
input.radio:checked ~ label:before { 
content:'\2714'; 
text-indent: .9em; 
color: #9CE2AE; 
background-color: #4DCB6D; 
} 

input.radio:checked ~ label { 
color: #777; 
} 

/* radio focus */ 
input.radio:focus ~ label:before { 
box-shadow: 0 0 0 3px #999; 
} 

</style> 

Answer 1

anstelle von allgemeinen Geschwister ~ Verwendung benachbarten Geschwister + Wähler

Allgemeine Geschwister werden alle Etiketten wählen neben dem Element

Benachbarte Geschwister nur das nächste Etikett auswählt

https://jsfiddle.net/victor_007/8ax050s8/1/

label { 
 
    width: 150px; 
 
    border-radius: 3px; 
 
    border: 1px solid #D1D3D4 
 
} 
 
/* hide input */ 
 

 
input.radio:empty { 
 
    margin-left: -999px; 
 
} 
 
/* style label */ 
 

 
input.radio:empty + label { 
 
    position: relative; 
 
    float: left; 
 
    line-height: 2.5em; 
 
    text-indent: 3.25em; 
 
    margin-top: 2em; 
 
    margin-left: 2em; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
input.radio:empty + label:before { 
 
    position: absolute; 
 
    display: block; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    content: ''; 
 
    width: 2.5em; 
 
    background: #D1D3D4; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 
/* toggle hover */ 
 

 
input.radio:hover:not(:checked) + label:before { 
 
    content: '\2714'; 
 
    text-indent: .9em; 
 
    color: #C2C2C2; 
 
} 
 
input.radio:hover:not(:checked) + label { 
 
    color: #888; 
 
} 
 
/* toggle on */ 
 

 
input.radio:checked + label:before { 
 
    content: '\2714'; 
 
    text-indent: .9em; 
 
    color: #9CE2AE; 
 
    background-color: #4DCB6D; 
 
} 
 
input.radio:checked + label { 
 
    color: #777; 
 
} 
 
/* radio focus */ 
 

 
input.radio:focus + label:before { 
 
    box-shadow: 0 0 0 3px #999; 
 
}

<input type="radio" name="radio" id="radio1" class="radio" checked/> 
 
<label for="radio1">Now</label> 
 

 
<input type="radio" name="radio" id="radio2" class="radio" /> 
 
<label for="radio2">Later</label>