Przełącznik css nie działa z radiem wejściowym typu

Question

Mam przycisk przełącznika. Ale nie działa z radiem typu wejściowego. Jeśli spróbuję z przyciskiem wyboru, to działa. Czemu? Jak mogę rozwiązać, utrzymując wejście radiowe?

@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 -->

Chciałbym że .c-okno zmienia kolor tła podczas przełączania

Answer 1

• miałeś kilka literówek, o czym wspomniał @fcalderan w komentarzach.
• Musisz mieć .c-window jako rodzeństwo, zmień znacznik HTML i dodaj do niego z-index:-1.
• i musisz określić, który input zmieni kolor 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

Jeśli chcesz użyć ~ selektor kod powinien wyglądać tak

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

nie można tego zrobić w 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 (do połowu zdarzenie change):

$(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 
} 
}); 
});