The feature of Switch css does not appear to function properly when used in conjunction with input type

Question

The feature of Switch css does not appear to function properly when used in conjunction with input type

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.

html css input checked

Answer 1

Answer №1

There were some typos pointed out by @fcalderan in the comments.
You must ensure that .c-window is a sibling, modify the HTML markup and include z-index:-1 to it.
Additionally, you should specify which input will alter 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

There were some typos pointed out by @fcalderan in the comments.
You must ensure that .c-window is a sibling, modify the HTML markup and include z-index:-1 to it.
Additionally, you should specify which input will alter 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 3

Answer №2

Is it possible to achieve this using javascript or jQuery?

Here is the HTML code snippet:

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

The following jQuery code can be used to handle the change event:


$(document).ready(function(){
    $('.switch').on('change', function(ev){
        if ($(this).val() == 0){
            // Perform actions when off
        } else {
            // Perform actions when on
        }
    });
});

Answer 4

Is it possible to achieve this using javascript or jQuery?

Here is the HTML code snippet:

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

The following jQuery code can be used to handle the change event:


$(document).ready(function(){
    $('.switch').on('change', function(ev){
        if ($(this).val() == 0){
            // Perform actions when off
        } else {
            // Perform actions when on
        }
    });
});

Answer 5

Answer №3

To utilize the ~ selector, your code should be structured 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 6

To utilize the ~ selector, your code should be structured 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>

The feature of Switch css does not appear to function properly when used in conjunction with input type

Answer №1

Answer №2

Answer №3

Similar questions

Top tips for utilizing CSS in a web component library to support various themes

Sorting of tables does not function properly following an ajax request

What's the best way to conceal scrollbars in Nuxt2 whilst preserving one for the description?

Having trouble importing CSS in ReactJS?

What is the best way to choose a single li element?

Adjust the background color of the date and time selection tool

Instructions on adding a class to every input element within a form using CakePHP

Image tinting color picker tool (using HTML, CSS, and web technologies)

Include IE-specific stylesheet code in your Angular application (version 1.2)

I am looking to superimpose one rectangle over another rectangle

Issues encountered when using Vue Transition in conjunction with v-autocomplete

Navigating into the forbidden territory of the if block that holds secrets untold

Column with a set width in Bootstrap

What is the best way to incorporate a unique box shadow onto my svg image?

Aligning two lines next to a radio button using HTML and CSS

Is there a way to extract the content within the HTML tags as well as the text enclosed within parentheses?

Styling <Link> component with styled-components: A step-by-step guide

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Manipulating Div Content with JQuery Based on Checkbox Selections

What is the reason for the countdown number's color remaining the same even after it reaches a specific time threshold?