स्विच सीएसएस इनपुट प्रकार रेडियो

Question

के साथ काम नहीं करता है मेरे पास एक स्विच बटन है। लेकिन यह इनपुट प्रकार रेडियो के साथ काम नहीं करता है। अगर मैं चेकबॉक्स बटन के साथ प्रयास करता हूं तो यह काम करता है। क्यूं कर? रेडियो इनपुट को बनाए रखने, मैं कैसे हल कर सकता हूं?

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

मैं चाहूँगा कि ग खिड़की पृष्ठभूमि रंग बदल जाता है जब यह स्विच

Answer 1

• आपके पास कुछ टाइपो थे, जैसा कि टिप्पणियों में @fcalderan द्वारा उल्लिखित है।
• आपको .c-window को भाई के रूप में रखने की आवश्यकता है, HTML मार्कअप बदलें और z-index:-1 पर जोड़ें।
• और आपको यह निर्दिष्ट करने की आवश्यकता है कि inputbackground रंग बदलने जा रहा है।

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

आप ~ चयनकर्ता का उपयोग करने के लिए अपने कोड इस

तरह जाना चाहिए चाहते हैं

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

आप जावास्क्रिप्ट/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 (परिवर्तन घटना को पकड़ने के लिए):

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