使用HTML5自定义一个单选框

HTML5 并没有直接提供一种方式来“自定义”单选框的样式，但你可以使用 CSS 和一些额外的 HTML 结构来模拟一个自定义的单选框。以下是一个简单的示例，说明如何创建一个自定义的单选框：

HTML:

<label class="custom-radio">
    <input type="radio" name="option" hidden>
    <span class="radio-custom"></span>
    选择项
</label>

CSS:

/* 自定义单选框的容器 */
.custom-radio {
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

/* 隐藏原生的单选框 */
.custom-radio input[type="radio"] {
    display: none;
}

/* 自定义单选框的样式 */
.custom-radio .radio-custom {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 50%;
    transition: all 0.3s;
}

/* 当单选框被选中时，改变自定义单选框的样式 */
.custom-radio input[type="radio"]:checked + .radio-custom {
    border-color: #007BFF;
    background-color: #007BFF;
}

/* 添加选中标记 */
.custom-radio input[type="radio"]:checked + .radio-custom::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
}

这个示例中，我们创建了一个自定义的单选框，当它被选中时，会改变颜色和添加一个白色的选中标记。你可以根据需要调整这个示例的样式。