Html 开关css不'；不能使用输入型收音机

我有一个开关按钮。但它不适用于输入型收音机。如果我尝试使用复选框按钮，它会工作。为什么？如何解决、维护无线电输入

@charset“utf-8”；
/*CSS文档*/
/*------概述-------*/
身体{
背景：#4a4a4a；
颜色：#151515；
字体：100%/1.5em“Lato”，无衬线；
保证金：0；
}
输入{
字体家族：继承；
字体大小：100%；
线高：正常；
保证金：0；
}
输入[type=“radio”]{
框大小：边框框；
填充：0；
}
/*------开关-------*/
.集装箱{
高度：64px；
左：50%；
余量：-32px0-80px；
位置：绝对位置；
最高：50%；
宽度：160px；
}
.开关{
背景：#fff；
边界半径：32px；
显示：块；
高度：64px；
位置：相对位置；
宽度：160px；
}
.开关标签{
颜色：#fff；
字体大小：48px；
字体大小：300；
线高：64px；
文本转换：大写；
-webkit过渡：颜色。2轻松；
-moz过渡：颜色。2秒轻松；
-ms过渡：颜色。2秒轻松；
-o-过渡：颜色。2s容易；
过渡：颜色。2s轻松；
宽度：100px；
}
.开关标签：第n个类型（1）{
左-75%；
位置：绝对位置；
文本对齐：右对齐；
}
.开关标签：第n个类型（2）{
位置：绝对位置；
右图：-75%；
文本对齐：左对齐；
}
.开关输入{
高度：64px；
左：0；
不透明度：0；
位置：绝对位置；
排名：0；
宽度：160px；
z指数：2；
}
.开关输入：选中~label:n类型（1）{color:#fff；}
.开关输入：选中~标签：第n个类型（2）{颜色：#808080；}
.switch input~：选中~标签：第n个类型（1）{color:#808080；}
.switch input~：选中~标签：第n个类型（2）{color:#fff；}
.开关输入：选中~.切换{
左：4px；
}
.开关输入~：选中~.切换{
左：100px；
}
.开关输入：已检查{
z指数：0；
}
.切换{
背景：#4a4a4a；
边界半径：50%；
高度：56px；
左：0；
位置：绝对位置；
顶部：4px；
-webkit转换：左。2秒轻松；
-moz转换：左。2秒轻松；
-ms转换：左2秒；
-o型过渡：左。2秒；
过渡：左2秒；
宽度：56px；
z指数：1；
}
c窗{
显示：块；
位置：绝对位置；
宽度：235px；
高度：235px；
保证金：0自动；
边界半径：100%；
边框：8px实心#FFB399；
背景：5ddfe8；
盒影：0px 0px 5px rgba（0,0,0,0.25）插图；
溢出：隐藏；
过渡：背景1s轻松输入输出；
}
输入[type=“radio”]：选中~.c窗口{
背景：#111；
}

在…上
关

如果您想使用

~

选择器，您的代码应该如下所示

body，html{
保证金：0；
填充：0；
}
.内容{
显示器：flex；
高度：100vh；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
}
c窗{
位置：绝对位置；
过渡：所有0.3秒都容易进入；
宽度：235px；
高度：235px；
边界半径：50%；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
背景：#aaa；
边框：5px纯黑；
z指数：1；
}
输入{
位置：相对位置；
z指数：2；
}
#关闭：已选中。c-窗口{
背景：蓝色；
}
#打开：已选中。c窗口{
背景：#aaa；
}

• 正如@fcalderan在评论中提到的，您有一些拼写错误
• 您需要将

  .c-window

  作为同级，更改HTML标记并向其添加

  z-index:-1

• 您需要指定哪个

  输入

  将更改

  背景

  颜色

/*CSS文档*/
/*------概述-------*/
身体{
背景：#4a4a4a；
颜色：#151515；
字体：100%/1.5em“Lato”，无衬线；
保证金：0；
}
输入{
字体家族：继承；
字体大小：100%；
线高：正常；
保证金：0；
}
输入[type=“radio”]{
框大小：边框框；
填充：0；
}
/*------开关-------*/
.集装箱{
高度：64px；
左：50%；
余量：-32px0-80px；
位置：绝对位置；
最高：50%；
宽度：160px；
}
.开关{
背景：#fff；
边界半径：32px；
显示：块；
高度：64px；
位置：相对位置；
宽度：160px；
}
.开关标签{
颜色：#fff；
字体大小：48px；
字体大小：300；
线高：64px；
文本转换：大写；
-webkit过渡：颜色。2轻松；
-moz过渡：颜色。2秒轻松；
-ms过渡：颜色。2秒轻松；
-o-过渡：颜色。2s容易；
过渡：颜色。2s轻松；
宽度：100px；
}
.开关标签：第一种类型{
左-75%；
位置：绝对位置；
文本对齐：右对齐；
}
.开关标签：类型的最后一个{
位置：绝对位置；
右图：-75%；
文本对齐：左对齐；
}
.开关输入{
高度：64px；
左：0；
不透明度：0；
位置：绝对位置；
排名：0；
宽度：160px；
z指数：2；
}
.开关输入：选中~标签：第一个类型{
颜色：#fff；
}
.开关输入：选中~标签：类型的最后一个{
颜色：#808080；
}
.开关输入：选中~标签：第一个类型{
颜色：#808080；
}
.开关输入：选中~标签：类型的最后一个{
颜色：#fff；
}
.开关输入：已检查{
z指数：0；
}
.开关输入：选中~.切换{
左：4px；
}
.开关输入~：选中~.切换{
左：100px；
}
.切换{
背景：#4a4a4a；
边界半径：50%；
高度：56px；
左：0；
位置：绝对位置；
顶部：4px；
-webkit转换：左。2秒轻松；
-moz转换：左。2秒轻松；
-ms转换：左2秒；
-o型过渡：左。2秒；
过渡：左2秒；
宽度：56px；
z指数：1；
}
c窗{
显示：块；
位置：绝对位置；
宽度：235px；
高度：235px；
保证金：0自动；
边界半径：100%；
边框：8px实心#FFB399；
背景：5ddfe8；
长方体阴影：0px 0px 5px rgba（0,0,0,0.25）插图；
溢出：隐藏；
过渡：背景1s轻松输入输出；
z指数：-1
}
输入：最后一个类型[type=“radio”]：选中~.c窗口{
背景：#111；
}

在…上
关

您不能在javascript/jQuery中完成吗

HTML:

---

您有一些输入错误，如

.switch-input~：ch
<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 -->

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