開關css不適用於輸入類型收音機

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

我想了.C-窗口更改背景顏色，當切換

Answer 1

• 你有一些錯別字，正如@fcalderan在評論中提到的那樣。
• 你需要有.c-window作爲兄弟，更改HTML標記並將z-index:-1添加到它。
• 並且您需要指定哪個input將更改background顏色。

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

你不能做到這一點在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（趕上change事件）：

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