radio button样式

Radio button 是一种用于表单的单选按钮，通常会和一些样式一起使用以增加可视化效果和用户体验。下面是一些常见的 radio button 样式示例：

1. 原生样式：

<label>
  <input type="radio" name="gender" value="male">
  Male
</label>
<label>
  <input type="radio" name="gender" value="female">
  Female
</label>

2. 自定义样式：

<label class="radio-container">Male
  <input type="radio" name="gender">
  <span class="radio-checkmark"></span>
</label>
<label class="radio-container">Female
  <input type="radio" name="gender">
  <span class="radio-checkmark"></span>
</label>

/* 自定义样式 */
.radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
}

.radio-container:hover input ~ .radio-checkmark {
  background-color: #ccc;
}

.radio-container input:checked ~ .radio-checkmark {
  background-color: #2196F3;
}

.radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-container input:checked ~ .radio-checkmark:after {
  display: block;
}

.radio-container .radio-checkmark:after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
}

3. 使用 CSS 框架：

Bootstrap：

<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="male" value="male">
  <label class="form-check-label" for="male">
    Male
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="female" value="female">
  <label class="form-check-label" for="female">
    Female
  </label>
</div>

/* Bootstrap 样式 */
.form-check-input:checked ~ .form-check-label::before {
  color: #fff;
  border-color: #2196f3;
  background-color: #2196f3;
}

.form-check-input:focus ~ .form-check-label::before {
  box-shadow: 0 0 0 1px #2196f3, 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

.form-check-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.6rem;
  margin-right: 0.25rem;
}

以上是一些 radio button 样式的示例，你可以根据需要选择适合自己的样式。