Switch css non funziona con il tipo di ingresso radio

Question

Ho un pulsante di commutazione. Ma non funziona con la radio del tipo di input. Se provo con il pulsante checkbox funziona. Perché? Come posso risolvere, mantenendo l'ingresso radio?

@charset "utf-8"; 
 
/* CSS Document */ 
 

 
/* ---------- GENERAL ---------- */ 
 

 
body { 
 
\t background: #4a4a4a; 
 
\t color: #151515; 
 
\t font: 100%/1.5em "Lato", sans-serif; 
 
\t margin: 0; 
 
} 
 

 
input { 
 
    font-family: inherit; 
 
    font-size: 100%; 
 
    line-height: normal; 
 
    margin: 0; 
 
} 
 

 
input[type="radio"] { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
} 
 

 
/* ---------- SWITCH ---------- */ 
 

 
.container { 
 
\t height: 64px; 
 
\t left: 50%; 
 
\t margin: -32px 0 0 -80px; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t width: 160px; 
 
} 
 

 
.switch { 
 
\t background: #fff; 
 
\t border-radius: 32px; 
 
\t display: block; 
 
\t height: 64px; 
 
\t position: relative; 
 
\t width: 160px; 
 
} 
 

 
.switch label { 
 
\t color: #fff; 
 
\t font-size: 48px; 
 
\t font-weight: 300; 
 
\t line-height: 64px; 
 
\t text-transform: uppercase; 
 
\t -webkit-transition: color .2s ease; 
 
\t -moz-transition: color .2s ease; 
 
\t -ms-transition: color .2s ease; 
 
\t -o-transition: color .2s ease; 
 
\t transition: color .2s ease; 
 
\t width: 100px; 
 
} 
 

 
.switch label:nth-of-type(1) { 
 
\t left: -75%; 
 
\t position: absolute; 
 
\t text-align: right; 
 
} 
 

 
.switch label:nth-of-type(2) { 
 
\t position: absolute; 
 
    right: -75%; 
 
\t text-align: left; 
 
} 
 

 
.switch input { 
 
\t height: 64px; 
 
\t left: 0; 
 
\t opacity: 0; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t width: 160px; 
 
\t z-index: 2; 
 
} 
 

 
.switch input:checked~label:nth-of-type(1) { color: #fff; } 
 
.switch input:checked~label:nth-of-type(2) { color: #808080; } 
 

 
.switch input~:checked~label:nth-of-type(1) { color: #808080; } 
 
.switch input~:checked~label:nth-of-type(2) { color: #fff; } 
 

 
.switch input:checked~.toggle { 
 
\t left: 4px; 
 
} 
 

 
.switch input~:checked~.toggle { 
 
\t left: 100px; 
 
} 
 

 
.switch input:checked { 
 
\t z-index: 0; 
 
} 
 

 
.toggle { 
 
\t background: #4a4a4a; 
 
\t border-radius: 50%; 
 
\t height: 56px; 
 
\t left: 0; 
 
\t position: absolute; 
 
\t top: 4px; 
 
\t -webkit-transition: left .2s ease; 
 
\t -moz-transition: left .2s ease; 
 
\t -ms-transition: left .2s ease; 
 
\t -o-transition: left .2s ease; 
 
\t transition: left .2s ease; 
 
\t width: 56px; 
 
\t z-index: 1; 
 
} 
 

 
.c-window{ 
 
    display: block; 
 
    position: absolute; 
 
    width: 235px; 
 
    height: 235px; 
 
    margin: 0 auto; 
 
    border-radius: 100%; 
 
    border: 8px solid #FFB399; 
 
    background: #5ddfe8; 
 
    box-shadow: 0px 0px 5px rgba(0,0,0,0.25) inset; 
 
    overflow: hidden; 
 
\t transition: background 1s ease-in-out; 
 
} 
 

 

 
input[type="radio"]:checked ~ .c-window { 
 
    background: #111; 
 
} 
 

\t <div class="container"> 
 

 
     <div class="c-window"></div> 
 
     
 
\t \t <div class="switch white"> 
 

 
\t \t \t <input type="radio" name="switch" id="switch-off"> 
 
\t \t \t <input type="radio" name="switch" id="switch-on" checked> 
 

 
\t \t \t <label for="switch-off">On</label> 
 
\t \t \t <label for="switch-on">Off</label> 
 

 
\t \t \t <span class="toggle"></span> 
 

 

 
    
 

 
\t \t </div> <!-- end switch --> 
 

 
\t </div> <!-- end container -->

mi piacerebbe che il .c finestra cambia il colore di sfondo quando si passa

Answer 1

• hai avuto alcuni errori di battitura, come menzionato da @fcalderan nei commenti.
• è necessario disporre di .c-window come fratello, modificare il codice HTML e aggiungere z-index:-1 ad esso.
• ed è necessario specificare quale input modificherà il colore background.

/* CSS Document */ 
 

 
/* ---------- GENERAL ---------- */ 
 

 
body { 
 
    background: #4a4a4a; 
 
    color: #151515; 
 
    font: 100%/1.5em"Lato", sans-serif; 
 
    margin: 0; 
 
} 
 
input { 
 
    font-family: inherit; 
 
    font-size: 100%; 
 
    line-height: normal; 
 
    margin: 0; 
 
} 
 
input[type="radio"] { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
} 
 
/* ---------- SWITCH ---------- */ 
 

 
.container { 
 
    height: 64px; 
 
    left: 50%; 
 
    margin: -32px 0 0 -80px; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 160px; 
 
} 
 
.switch { 
 
    background: #fff; 
 
    border-radius: 32px; 
 
    display: block; 
 
    height: 64px; 
 
    position: relative; 
 
    width: 160px; 
 
} 
 
.switch label { 
 
    color: #fff; 
 
    font-size: 48px; 
 
    font-weight: 300; 
 
    line-height: 64px; 
 
    text-transform: uppercase; 
 
    -webkit-transition: color .2s ease; 
 
    -moz-transition: color .2s ease; 
 
    -ms-transition: color .2s ease; 
 
    -o-transition: color .2s ease; 
 
    transition: color .2s ease; 
 
    width: 100px; 
 
} 
 
.switch label:first-of-type { 
 
    left: -75%; 
 
    position: absolute; 
 
    text-align: right; 
 
} 
 
.switch label:last-of-type { 
 
    position: absolute; 
 
    right: -75%; 
 
    text-align: left; 
 
} 
 
.switch input { 
 
    height: 64px; 
 
    left: 0; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 160px; 
 
    z-index: 2; 
 
} 
 
.switch input:checked~label:first-of-type { 
 
    color: #fff; 
 
} 
 
.switch input:checked~label:last-of-type { 
 
    color: #808080; 
 
} 
 
.switch input:checked~label:first-of-type { 
 
    color: #808080; 
 
} 
 
.switch input:checked~label:last-of-type { 
 
    color: #fff; 
 
} 
 
.switch input:checked { 
 
\t z-index: 0; 
 
} 
 
.switch input:checked~.toggle { 
 
    left: 4px; 
 
} 
 
.switch input~:checked~.toggle { 
 
    left: 100px; 
 
} 
 
.toggle { 
 
    background: #4a4a4a; 
 
    border-radius: 50%; 
 
    height: 56px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 4px; 
 
    -webkit-transition: left .2s ease; 
 
    -moz-transition: left .2s ease; 
 
    -ms-transition: left .2s ease; 
 
    -o-transition: left .2s ease; 
 
    transition: left .2s ease; 
 
    width: 56px; 
 
    z-index: 1; 
 
} 
 
.c-window { 
 
    display: block; 
 
    position: absolute; 
 
    width: 235px; 
 
    height: 235px; 
 
    margin: 0 auto; 
 
    border-radius: 100%; 
 
    border: 8px solid #FFB399; 
 
    background: #5ddfe8; 
 
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25) inset; 
 
    overflow: hidden; 
 
    transition: background 1s ease-in-out; 
 
    z-index:-1 
 
} 
 
input:last-of-type[type="radio"]:checked ~ .c-window { 
 
    background: #111; 
 
}

<div class="container"> 
 
    
 
    <div class="switch white"> 
 
    <input type="radio" name="switch" id="switch-off"> 
 
    <input type="radio" name="switch" id="switch-on" checked> 
 
    <label for="switch-off">On</label> 
 
    <label for="switch-on">Off</label> 
 
    <span class="toggle"></span> 
 
    <div class="c-window"></div> 
 
    </div> 
 
    <!-- end switch --> 
 
</div> 
 
<!-- end container -->

Answer 2

Se si desidera utilizzare ~ selettore il codice dovrebbe andare in questo modo

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    height: 100vh; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: relative; 
 
} 
 

 
.c-window { 
 
    position: absolute; 
 
    transition: all 0.3s ease-in; 
 
    width: 235px; 
 
    height: 235px; 
 
    border-radius: 50%; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: #aaa; 
 
    border: 5px solid black; 
 
    z-index: 1; 
 
} 
 

 
input { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
#switch-off:checked ~ .c-window { 
 
    background: blue; 
 
} 
 

 
#switch-on:checked ~ .c-window { 
 
    background: #aaa; 
 
}

<div class="content"> 
 
    <input type="radio" name="switch" id="switch-off"> 
 
    <input type="radio" name="switch" id="switch-on" checked> 
 
    
 
    <div class="c-window"></div> 
 
</div>

Answer 3

Non potete farlo in javascript/jQuery?

HTML:

<div class="container"> 

    <div class="c-window"></div> 

    <div class="switch white"> 

     <input type="radio" name="switch" value="0" id="switch-off" class="switch"> 
     <input type="radio" name="switch" value="1" id="switch-on" class="switch" checked> 

     <label for="switch-off">On</label> 
     <label for="switch-on">Off</label> 

     <span class="toggle"></span> 

    </div> <!-- end switch --> 

</div> <!-- end container --> 

jQuery (per catturare l'evento di modifica):

$(document).ready(function(){ 
$('.switch').on('change', function(ev){ 
if ($(this).val() == 0){ 
//do some stuff you want when off 
}else{ 
//do some stuff you want when on 
} 
}); 
});