单选框自定义样式

单选框可以通过样式来进行自定义，下面是一个简单的示例代码：

HTML代码：

<div class="radio-container">
  <input type="radio" id="radio1" name="radio-group" checked>
  <label for="radio1">选项一</label>

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

  <input type="radio" id="radio3" name="radio-group">
  <label for="radio3">选项三</label>
</div>

CSS代码：

.radio-container {
  display: flex;
  align-items: center;
}

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #999;
  margin-right: 10px;
  cursor: pointer;
}

input[type="radio"]:checked + label {
  background-color: #999;
  color: #fff;
}

在上面的代码中，我们使用了flex布局来让单选框和文本在同一行，并使用了display:none来隐藏原生的单选框，使用了label标签的for属性来关联单选框。然后通过设置label标签的样式来实现自定义样式，包括圆形的样式、边框、选中样式等。