好看的html单选框

以下是一个简单的 HTML 单选框的样式：

<label for="option1">
  <input type="radio" id="option1" name="options" value="option1">
  <span>选项 1</span>
</label>

<label for="option2">
  <input type="radio" id="option2" name="options" value="option2">
  <span>选项 2</span>
</label>

<label for="option3">
  <input type="radio" id="option3" name="options" value="option3">
  <span>选项 3</span>
</label>

然后，你可以使用 CSS 来为单选框添加样式：

/* 隐藏原始单选框 */
input[type="radio"] {
  display: none;
}

/* 定义新的单选框样式 */
span {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin-right: 15px;
  cursor: pointer;
  font-size: 18px;
  color: #333;
}

/* 添加选项圆圈 */
span:before {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #333;
}

/* 添加选中状态 */
input[type="radio"]:checked + span:before {
  background-color: #333;
}

这里使用了伪元素 `:before` 来添加圆圈，并在选择时添加了一个背景色。你可以根据自己的需要来修改样式。