使用HTML5怎样自定义单选框？

以下是一个使用HTML5自定义单选框的示例：

<style>
.custom-radio {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 18px;
  user-select: none;
}

.custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-radio .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
}

.custom-radio:hover .checkmark {
  background-color: #ccc;
}

.custom-radio input:checked ~ .checkmark {
  background-color: #2196F3;
}

.custom-radio .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-radio input:checked ~ .checkmark:after {
  display: block;
}

.custom-radio .checkmark:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

</style>

<label class="custom-radio">选项一
  <input type="radio" name="radioButton" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="custom-radio">选项二
  <input type="radio" name="radioButton">
  <span class="checkmark"></span>
</label>

该示例使用CSS创建单选框的美化样式。每个单选框都是一个label元素，其中包含一个input元素和一个自定义的span元素。CSS设置input元素不可见，样式应用于span元素上。样式根据input元素的选中状态改变。 name属性保证单选框在同一组中。