如何仅使用html和css创建复选框和单选按钮

我目前正在做一个学校项目，我的想法很大一部分是基于单选按钮和复选框。我已经找到了很多关于如何创建它们的代码，唯一的问题是我只允许使用某些html标记，而不允许使用jQuery

我可以使用的标签：

•html、标题、正文、标题、元、链接

•页眉、章节、文章、页脚

•司

•h1-h6

•p

•跨度

•ul、ol、li

•a

•img

•音频

---

有没有办法用这些标签创建复选框和单选按钮

要以HTML格式从用户输入数据，您唯一的选择是输入的标记。请参阅以下官方文件：

---

仅使用允许的标记，您无法创建单选按钮和复选框。

单选按钮

我想出了单选按钮的方法，但它们只能在其中一个被聚焦时工作

收音机{
显示：内联块；
位置：相对位置；
左边距：1米；
左侧填充：1.5em；
}
.收音机：：以前{
内容：“；
显示：内联块；
边框：1px纯黑；
宽度：1米；
高度：1米；
边界半径：100%；
位置：绝对位置；
左：0；
排名：0；
}
.电台：聚焦{
大纲：无；
}
.收音机：焦点：：之后{
内容：“；
显示：内联块；
边框：1px纯黑；
宽度：0.5em；
高度：0.5em；
边界半径：100%；
位置：绝对位置；
背景色：黑色；
左：0.25em；
顶部：0.25em；
}

选项1
选项2
选项3

我不允许使用输入！还有其他方法吗？你也不能通过本机Javascript动态生成字段？除非它们只是为了展示-请看我的答案。我建议用你试图在更一般意义上实现的内容更新这个问题，如果不允许您使用

输入

元素，则单选/复选框按钮不太可能是答案。您实际想要实现的是什么？它们需要工作，或者只是一个视觉练习？更新：我理解，如果不使用输入或jQuery，我无法创建复选框和单选按钮。我试图实现的是有一个小盒子（或圆圈），用户可以点击，点击后它看起来是选中的。我想我可以用css中的：target选择器实现这一点。唯一的“问题”是，如果用户选择了另一个圆圈，则选择的第一个圆圈不会返回为“未关闭”。还是我错了？不管怎样，这都是我的后备计划！老师说最重要的是展示这个想法，功能不一定要完美。