单选按钮默认颜色设置：选中时从琥珀色变为绿色

核心思路 #

用CSS伪元素模拟单选按钮外观，通过选中状态选择器切换颜色，替换原生单选按钮的默认样式。

代码实现 #

HTML结构

<div class="radio-group">
  <input type="radio" name="option" id="option1" class="custom-radio">
  <label for="option1">选项1</label>
  
  <input type="radio" name="option" id="option2" class="custom-radio">
  <label for="option2">选项2</label>
</div>

CSS样式

/* 隐藏原生单选按钮 */
.custom-radio {
  position: absolute;
  opacity: 0;
}

/* 模拟单选按钮外观 */
.custom-radio + label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
}

.custom-radio + label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* 未选中时的琥珀色背景 */
  background-color: #f59e0b;
  border: 1px solid #d97706;
}

/* 选中时切换为绿色 */
.custom-radio:checked + label::before {
  background-color: #10b981;
  border-color: #059669;
}

/* 可选：添加选中时的内部白色圆点 */
.custom-radio:checked + label::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: white;
}

说明 #

• 原生单选按钮被隐藏，通过<label>的伪元素::before绘制自定义按钮
• 未选中状态用琥珀色（#f59e0b），选中状态切换为绿色（#10b981），颜色可按需调整
• 点击<label>会触发对应单选按钮的选中状态，实现交互效果

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