Css switch not working with input type radio

Question

I have a toggle button. But it does not work with input type radio. If I try with a button, this works. What for? How can I solve by supporting the radio input?

@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 would like .c-window to change the background color when switching

Answer 1

• you had a few typos, as @fcalderan mentioned in the comments.
• you need to have .c-window as a sibling, change the HTML markup and add z-index:-1 .
• and you need to specify which input will change the background color.

 /* 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 { 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

If you want to use the ~ selector, your code should look like this

 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

Can you do it 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 (to catch the change event):

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