input 单选框样式

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

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

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

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

可以使用 CSS 样式来美化单选框的外观，例如：

input[type="radio"] {
  opacity: 0;
  position: absolute;
}

input[type="radio"] + label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}

input[type="radio"]:checked + label::before {
  background-color: #007bff;
}

这个样式将单选框的默认样式隐藏，使用伪元素 `::before` 来创建一个圆形的外观，并且在选中时变为蓝色。