Switch css doesn't work with input type radio

Question

I have a switch button. But it doesn't work with the input type radio. If I try with checkbox button it works. Why? How can I solve, maintaining 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'd like that the .c-window changes the background colour when it switch

you have some typos like `.switch input~:checked`, `.switch input~:checked~.toggle`. Furthermore, `input[type="radio"]:checked ~ .c-window` won't work, since they are not siblings — Fabrizio Calderan, Feb 16 '16 at 14:01
I edited .switch input:checked ~ .c-window { background: #111; }but it doesnt work yet — panagulis72, Feb 16 '16 at 14:07
but still your input:checked and your .c-window are not siblings. For further information see https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors — Fabrizio Calderan, Feb 16 '16 at 14:09
I put the c-window below to the inputs so in theory they are now siblings. But if I do so and I refresh the page, the circle has immediately a black background and does not change — panagulis72, Feb 16 '16 at 14:12
if you made some changes to the code above, put your revised code in fiddle so we can see the same thing — Fabrizio Calderan, Feb 16 '16 at 14:15

score 1 · Accepted Answer · answered Feb 16 '16 at 14:16

you had a few typos, as mentioned by @fcalderan in comments.
you need to have .c-window as sibling, change the HTML markup and add z-index:-1 to it.
and you need to specify which input is going to 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 -->

Nenad Vracar · Answer 2 · 2016-02-16T14:23:54.233

If you want to use ~ selector your code should go 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>

Nagy Istvan · Answer 3 · 2016-02-16T14:19:31.983

0

Can't 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
}
});
});

edited Feb 16 '16 at 14:19

answered Feb 16 '16 at 14:16

Nagy Istvan

202
3
12

1

OP didn't mention neither javascript nor jQuery. – Fabrizio Calderan Feb 16 '16 at 14:17
@NagyIstvan see my answer – dippas Feb 16 '16 at 14:22
1

Using properly the :checked pseudoclass as how the OP is trying to do (see also previous answers) – Fabrizio Calderan Feb 16 '16 at 14:22

Switch css doesn't work with input type radio

3 Answers3