如何创建自定义radio button 选中时显示外圈圆形背景

• 隐藏原生<input type="radio">元素，规避原生样式不可自定义的问题
• 用<label>标签和单选框做绑定，点击label即可触发单选框选中状态
• 自定义label内的视觉元素：分别实现未选中态的空心圆、选中态的外圈背景环和内部实心圆点
• 通过input:checked伪类选择器匹配选中状态，联动修改关联label的自定义样式即可实现需求

<div class="radio-group">
  <label class="radio-item">
    <input type="radio" name="demo" value="option1">
    <span class="radio-dot"></span>
    选项1
  </label>
  <label class="radio-item">
    <input type="radio" name="demo" value="option2">
    <span class="radio-dot"></span>
    选项2
  </label>
  <label class="radio-item">
    <input type="radio" name="demo" value="option3">
    <span class="radio-dot"></span>
    选项3
  </label>
</div>

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

/* 单选框外层容器样式 */
.radio-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
  cursor: pointer;
}

/* 自定义单选圆点基础样式 */
.radio-dot {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

/* 选中态外层圆形背景 */
.radio-item input[type="radio"]:checked + .radio-dot {
  border-color: #2196F3;
  background-color: #e3f2fd; /* 可根据设计稿调整外圈背景色、透明度 */
}

/* 选中态内部实心圆点 */
.radio-item input[type="radio"]:checked + .radio-dot::after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: #2196F3;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

你可以根据实际设计需求灵活调整尺寸、颜色参数，匹配设计稿效果。

内容的提问来源于stack exchange，提问作者Karan sharma