如何使用 HTML 和 CSS 创建自定义单选按钮？

在 HTML 和 CSS 中，可以使用自定义单选按钮来替代原生的单选按钮样式，以实现更加美观的效果。本文将介绍如何使用 HTML 和 CSS 创建自定义单选按钮。

HTML 实现

首先，我们需要在 HTML 中创建一个单选按钮，代码如下：

<input type="radio" name="radio-btn" id="radio-btn-1" />
<label for="radio-btn-1">选项一</label>

其中，input 标签的 type 属性设置为 radio，表示创建一个单选按钮；name 属性用于分组单选按钮；id 属性用于顶一个唯一的标识符；label 标签的 for 属性设置为 radio-btn-1，表示将该标签与 input 标签关联起来，点击该标签时，input 标签将被选中。

创建多个单选按钮时，只需要修改 id 属性和 label 标签的 for 属性即可。

CSS 实现

使用 CSS 来自定义单选按钮的样式，代码如下：

input[type="radio"] {
    display: none;
}
label {
    display: inline-block;
    margin-right: 10px;
    line-height: 1.2;
    cursor: pointer;
}
label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 50%;
    vertical-align: middle;
}
input[type="radio"]:checked + label::before {
    background-color: #3488c7;
}

其中，input[type="radio"] 设置为 display: none; 是为了隐藏原生的单选按钮样式；label 标签设置为 display: inline-block;，使其水平排列；label::before 用于添加自定义样式，对应的 content 属性为空，表示该标签没有内容元素；border 属性设置为 1px solid #ccc，表示添加一个带有灰色边框的圆形元素，border-radius 属性将圆形变为半圆；input[type="radio"]:checked + label::before 表示当单选按钮被选中时，该标签的背景色变为 #3488c7。

完整代码片段

<input type="radio" name="radio-btn" id="radio-btn-1" />
<label for="radio-btn-1">选项一</label>

<input type="radio" name="radio-btn" id="radio-btn-2" />
<label for="radio-btn-2">选项二</label>

<input type="radio" name="radio-btn" id="radio-btn-3" />
<label for="radio-btn-3">选项三</label>

<style>
    input[type="radio"] {
        display: none;
    }
    label {
        display: inline-block;
        margin-right: 10px;
        line-height: 1.2;
        cursor: pointer;
    }
    label::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 5px;
        border: 1px solid #ccc;
        border-radius: 50%;
        vertical-align: middle;
    }
    input[type="radio"]:checked + label::before {
        background-color: #3488c7;
    }
</style>

以上就是使用 HTML 和 CSS 创建自定义单选按钮的方法，可以根据需要自定义样式来设计自己的单选按钮样式。