html radio开关样式挑选性别

你可以使用以下代码来创建一个性别选择的开关样式：

HTML代码：

<div class="gender-switch">
  <input type="radio" id="male" name="gender" value="male" checked>
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label>
</div>

CSS代码：

.gender-switch {
  display: inline-block;
  margin: 10px;
  font-size: 16px;
}

.gender-switch input[type="radio"] {
  display: none;
}

.gender-switch label {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
  cursor: pointer;
}

.gender-switch label:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
}

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

.gender-switch label:after {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}

.gender-switch input[type="radio"]:checked + label:after {
  left: 15px;
}

你可以在CSS代码中更改颜色和大小来适应你的设计需求。