Html 使用“创建开关切换”；是”&引用；否"；出现在里面

如何创建“Y”和“N”显示在输入“上方”的开关切换输入？ 在下面的代码段中，我遇到了一个问题，即“Y”和“N”的z索引覆盖了输入，因此只有在z索引跨度周围单击时才能切换

此外，我希望在切换复选框时字母的颜色会发生变化，但我认为这是第二个问题

body，html{
框大小：边框框；
}
*，*：之前，*：之后{
框大小：继承；
}
.开关输入{
位置：绝对位置；
排名：0；
左：0；
宽度：90px；
高度：50px；
不透明度：0；
z指数：0；
}
.开关标签：之前{
内容：''；
文本对齐：居中；
位置：绝对位置；
颜色：红色；
顶部：5px；
左：0；
宽度：90px；
高度：35px；
背景色：rgba（0,0,0,0.26）；
边界半径：100px；
z指数：0；
-webkit过渡：背景色0.28s立方贝塞尔（0.4,0,0.2,1）；
过渡：背景色0.28s三次贝塞尔（0.4,0,0.2,1）；
}
.开关标签：之后{
内容：''；
颜色：白色；
位置：绝对位置；
文本对齐：居中；
字体大小：24px；
填充：4.4px0；
顶部：-2px；
左：0；
宽度：50px；
高度：50px；
背景色：#2d95e5；
边界半径：100px；
盒影：0 2px2px0RGBA（0,0,0,0.14），0 3px1px-2pxRGBA（0,0,0,0.2），0 1px5px0RGBA（0,0,0,0.12）；
z指数：0；
-webkit过渡：所有0.28s立方贝塞尔（0.4,0,0.2,1）；
过渡：所有0.28s三次贝塞尔（0.4,0,0.2,1）；
-webkit转换属性：左，背景色；
过渡属性：左，背景色；
}
.开关\输入：选中+.开关\标签：之前{
背景色：rgba（2252252250.5）；
}
.开关\输入：选中+.开关\标签：之后{
左：40px；
内容：''；
颜色：白色；
背景色：#bfbf；
}
.Yesno集装箱{
字体系列：无衬线；
显示器：flex；
宽度：70px；
对正内容：空间均匀；
对齐内容：居中对齐；
}
是的，不是{
字体大小：24px；
}
.是的{
位置：相对位置；
颜色：黑色！重要；
z指数：999！重要；
}
不{
位置：相对位置；
颜色：黑色！重要；
z指数：999！重要；
}

Y
N

。必须在屏幕上看到开关标签，请尝试此操作

body，html{
框大小：边框框；
}
*，*：之前，*：之后{
框大小：继承；
}
/*添加.开关\u标签*/
.开关\输入，.开关\标签{
位置：绝对位置；
排名：0；
左：0；
宽度：90px；
高度：50px；
不透明度：0；
z指数：0；
}
/*加*/
.开关标签{
z指数：2；
不透明度：1；
}
.开关标签：之前{
内容：''；
文本对齐：居中；
位置：绝对位置；
颜色：红色；
顶部：5px；
左：0；
宽度：90px；
高度：35px；
背景色：rgba（0,0,0,0.26）；
边界半径：100px；
z指数：0；
-webkit过渡：背景色0.28s立方贝塞尔（0.4,0,0.2,1）；
过渡：背景色0.28s三次贝塞尔（0.4,0,0.2,1）；
}
.开关标签：之后{
内容：''；
颜色：白色；
位置：绝对位置；
文本对齐：居中；
字体大小：24px；
填充：4.4px0；
顶部：-2px；
左：0；
宽度：50px；
高度：50px；
背景色：#2d95e5；
边界半径：100px；
盒影：0 2px2px0RGBA（0,0,0,0.14），0 3px1px-2pxRGBA（0,0,0,0.2），0 1px5px0RGBA（0,0,0,0.12）；
z指数：0；
-webkit过渡：所有0.28s立方贝塞尔（0.4,0,0.2,1）；
过渡：所有0.28s三次贝塞尔（0.4,0,0.2,1）；
-webkit转换属性：左，背景色；
过渡属性：左，背景色；
}
.开关\输入：选中+.开关\标签：之前{
背景色：rgba（2252252250.5）；
}
.开关\输入：选中+.开关\标签：之后{
左：40px；
内容：''；
颜色：白色；
背景色：#bfbf；
}
.Yesno集装箱{
字体系列：无衬线；
显示器：flex；
宽度：70px；
对正内容：空间均匀；
对齐内容：居中对齐；
}
是的，不是{
字体大小：24px；
}
.是的{
位置：相对位置；
颜色：黑色！重要；
z指数：1；
}
/*加*/
.switch\uu输入：选中+.switch\uu标签+.yesnocontainer>.no{
z指数：3；
}
不{
位置：相对位置；
颜色：黑色！重要；
z指数：1；
}
/*加*/
.switch\u输入：未（：选中）+.switch\u标签+.yesnocontainer>。是{
z指数：3；
}

Y
N

。必须在屏幕上看到开关标签，请尝试此操作

body，html{
框大小：边框框；
}
*，*：之前，*：之后{
框大小：继承；
}
/*添加.开关\u标签*/
.开关\输入，.开关\标签{
位置：绝对位置；
排名：0；
左：0；
宽度：90px；
高度：50px；
不透明度：0；
z指数：0；
}
/*加*/
.开关标签{
z指数：2；
不透明度：1；
}
.开关标签：之前{
内容：''；
文本对齐：居中；
位置：绝对位置；
颜色：红色；
顶部：5px；
左：0；
宽度：90px；
高度：35px；
背景色：rgba（0,0,0,0.26）；
边界半径：100px；
z指数：0；
-webkit过渡：背景色0.28s立方贝塞尔（0.4,0,0.2,1）；
过渡：背景色0.28s三次贝塞尔（0.4,0,0.2,1）；
}
.开关标签：之后{
内容：''；
颜色：白色；
位置：绝对位置；
文本对齐：居中；
字体大小：24px；
填充：4.4px0；
顶部：-2px；
左：0；
宽度：50px；
高度：50px；
背景色：#2d95e5；
边界半径：100px；
盒影：0 2px2px0RGBA（0,0,0,0.14），0 3px1px-2pxRGBA（0,0,0,0.2），0 1px5px0RGBA（0,0,0,0.12）；
z指数：0；
-webkit过渡：所有0.28s立方贝塞尔（0.4,0,0.2,1）；
过渡：所有0.28s三次贝塞尔（0.4,0,0.2,1）；
-webkit转换属性：左，背景色；
过渡属性：左，背景色；
}
.开关\输入：选中+.开关\标签：之前{
背景色：rgba（2252252250.5）；
}
.开关\输入：选中+.开关\标签：之后{
左：40px；
内容：''；
颜色：白色；
背景色：#bfbf；
}
.Yesno集装箱{
字体系列：无衬线；
显示器：flex；
宽度：