Html 如何更好地设置复选框的样式？Toggleclass是'；不工作，它似乎需要一个id-如何在检查之前使此复选标记图标不可见

我正在尝试设置一个复选框的样式，并实现了一种更改背景颜色的方法-请参见下文

身体，
html{
字体系列：“Lato”，单空格；
字体大小：calc（1rem+1vw）；
}
.label\u复选框{
显示：无；
}
.标记复选框i.图标{
可见性：隐藏；
字体大小：calc（9rem+1vw）；
颜色：透明；
}
.标签检查{
显示：内联块；
边界半径：3%；
边框：2倍实心rgba（0,0,0,0.1）；
背景：白色；
垂直对齐：中间对齐；
右边距：20px；
宽度：10em；
高度：2米；
光标：指针；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.label\uu check i.图标{
不透明度：0.2；
字体大小：calc（9rem+1vw）；
颜色：白色；
}
.标签检查：悬停{
边框：5px实心rgba（0,0,0,0.2）；
}
.label\u复选框：选中+.label\u文本。label\u复选框{
-webkit动画：向前检查0.1s立方贝塞尔（0.895,0.03,0.685,0.22）；
动画：向前检查0.1s立方贝塞尔（0.895,0.03,0.685,0.22）；
}
.label\u复选框：选中+.label\u文本。label\u复选框。图标{
不透明度：1；
变换：比例（0）；
颜色：白色；
-webkit文本笔划：0；
}
.中心{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
@-webkit关键帧检查{
100% {
宽度：10em；
高度：2米；
背景#00d478；
边界：0；
不透明度：1；
}
}
@关键帧检查{
100% {
宽度：10em；
高度：2米；
背景#00d478；
边界：0；
不透明度：1；
}
}
.正常{
字体大小：15px；
线高：20px；
颜色：蓝紫色；
}
.更大{
字体大小：25px；
颜色：森林绿；
}

您应该使发布到空JSFIDLE中的代码没有帮助，而不是小提琴。你复制了/pate tha html/css并注意到它是用较少的css编写的，需要编译吗？@Tom-这意味着它可以在这里运行，我不必把你的问题留给你的代码；这意味着它不会像小提琴那样在将来某个时候消失，使这个问题对未来读者的帮助减少；还有一个“复制密码回答”功能。这也意味着会有更多的人愿意尝试使用你的代码，从而回答你的问题。好吧，摆脱小提琴-有人知道如何让这个小复选标记消失或用不同的图标类替换吗？再次感谢。