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

Question

我目前正在从事一个学校项目，我的大部分想法都是基于单选按钮和复选框。我发现了很多关于如何创建它们的代码，唯一的问题是我只被允许使用某些 html-tags 而没有 jQuery。

我可以使用的标签：

• html、head、body、title、meta、link

• 页眉、部分、文章、页脚

• 分区

• h1-h6

• p

• 跨度

• ul, ol, li

• 一个

• 图像

• 音频

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

Answer 1

单选按钮

我想出了制作单选按钮的方法，但它们仅在其中一个被聚焦时才起作用。

.radio {
    display: inline-block;
    position: relative;
    margin-left: 1em;
    padding-left: 1.5em;
}

.radio::before {
    content: "";
    display: inline-block;
    border: 1px solid black;
    width: 1em;
    height: 1em;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.radio:focus {
    outline: none;
}

.radio:focus::after {
    content: "";
    display: inline-block;
    border: 1px solid black;
    width: 0.5em;
    height: 0.5em;
    border-radius: 100%;
    position: absolute;
    background-color: black;
    left: 0.25em;
    top: 0.25em;
}

<ul class="radio-group">
    <li tabindex="0" class="radio">Option 1</li>
    <li tabindex="0" class="radio">Option 2</li>
    <li tabindex="0" class="radio">Option 3</li>
</ul>

这里的关键元素是 <li> 项目中的 tabindex 使它们具有焦点。

tabindex 全局属性指示它的元素是否可以聚焦，以及它是否/在哪里参与顺序键盘导航（通常使用 Tab 键，因此得名）。它接受一个整数作为值，根据整数的值产生不同的结果：[...]

复选框

我为它们设置了样式，但 我不知道如何在没有 JS 的情况下使它们工作。 （现在它们的行为与收音机完全一样。）

.check {
    display: inline-block;
    position: relative;
    margin-left: 1em;
    padding-left: 1.5em;
}

.check::before {
    content: "";
    display: inline-block;
    border: 1px solid black;
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0;
    top: 0;
}

.check:focus {
    outline: none;
}

.check:focus::after {
    content: "";
    display: inline-block;
    border-left: 3px solid black;
    border-bottom: 3px solid black;
    transform: rotate(-45deg);
    width: 1em;
    height: 0.5em;
    position: absolute;
    left: 0.1em;
    top: -0.1em;
}

<ul class="check-boxes">
    <li tabindex="0" class="check">Option 1</li>
    <li tabindex="0" class="check">Option 2</li>
    <li tabindex="0" class="check">Option 3</li>
</ul>

提示：我想到的唯一与保存状态类似的纯 CSS 东西是 CSS counters，但是由于您无法根据计数器的值构建选择器...

Answer 2

要在 HTML 中输入来自用户的数据，您唯一的选择是输入的标签。查看官方文档：

https://www.w3schools.com/html/html_form_input_types.asp

只有允许的标签才能创建单选按钮和复选框。