Html 如何使输入（收音机？）看起来像两个选择之间的切换/滑块？

我对编码一无所知，我在课堂上做的一个项目是注册表格。它需要有一个“男性”或“女性”的输入，看起来像一个开关。我假设它是一个单选按钮，看起来像CSS中的一个切换，但是从我所读到的内容来看，解决方法非常复杂，或者你需要使用JS或者一些我们还没有学会的东西。 我想我已经接近它的其余部分了，但我无法获得男性/女性的输入

我的任务是复制：

我想这是一个单选按钮，看起来像一个开关

您是对的（至少考虑使用单选按钮），这是两个

输入

类型的

单选

，对于使用

CSS

设置样式的每个（

标签

）都有一个关联的

标签

简而言之，以下是最终结果的现场演示：

.wrapper{
显示器：flex；
填充：4px；
背景色：#24ef43；
}
.自定义输入{
柔性生长：1；
}
.自定义输入[类型=收音机]{
显示：无；
}
.自定义输入标签{
显示：块；
填充：6px 8px；
颜色：#fff；
字体大小：粗体；
文本对齐：居中；
过渡期：一切顺利；
}
.自定义输入[类型=收音机]：选中+标签{
背景色：#F5；
颜色：#000；
边界半径：4px；
}

女性
男性

这张图片是我们尝试复制的示例，因此您可以看到男性/女性输入切换开关复选框收音机。这是否回答了您的问题？我不这么认为…我昨晚看到了那个，并试图复制和粘贴那个回复，但我不确定什么是引导，无法让它工作。我刚才看到其他较小的html css只回答下面的问题，所以我回家后会尝试实现它。在这个层次上，似乎应该有一些真正基本的方法来实现这一点，因为我们只学习了最基本的技能，所以在我链接的问题中有一些纯CSS解决方案（很多答案）。阅读它，它会对你有所帮助。这是我到目前为止写的代码：CSS=很抱歉，当我试图粘贴我的CSS以向你展示我所拥有的内容时，它说的字符太多了。也就是说，哇，那个代码确实加入了我正在寻找的那种切换！非常感谢。现在我将试着跟随它来理解它是如何做的。我已经匹配了背景色。现在我需要弄清楚如何从选中的选项开始。我在css中看到它声明为“checked”，所以我将对此进行研究并尝试找出答案。非常感谢你的帮助！所以我在看你为无线电切换写的css代码。这就是我认为正在发生的事情：您正在使用display:none隐藏实际输入（填充的圆圈），并且只显示样式类似于切换的标签。用户仍然通过单击标签来选择收音机输入，因此它仍然可以作为收音机使用。是这样吗？我非常感谢任何帮助，因为我正在努力学习这些Web开发概念。是的，你是对的。