单选框女生男生，css样式

可以使用以下 CSS 样式来创建一个单选框，其中有两个选项：女生和男生。

HTML 代码：

<label>
  <input type="radio" name="gender" value="female">
  女生
</label>

<label>
  <input type="radio" name="gender" value="male">
  男生
</label>

CSS 样式：

label {
  display: block;
  margin-bottom: 10px;
}

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

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

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

input[type="radio"] + span {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

这个样式会隐藏原始的单选框按钮，然后使用 `before` 伪元素来创建一个圆形的选项。当选中一个选项时，它的背景颜色和边框颜色会改变为蓝色。