Why does the switch button not work with the input type radio but works with a checkbox button? How can I maintain the radio input and solve this issue?
@charset "utf-8";
/* 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:nth-of-type(1) {
left: -75%;
position: absolute;
text-align: right;
}
.switch label:nth-of-type(2) {
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: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 {
left: 4px;
}
.switch input~:checked~.toggle {
left: 100px;
}
.switch input:checked {
z-index: 0;
}
.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;
}
input[type="radio"]:checked ~ .c-window {
background: #111;
}
<div class="container">
<div class="c-window"></div>
<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> <!-- end switch -->
</div> <!-- end container -->I am looking to make the .c-window change its background color when the switch is toggled.