如何通过CSS修改单选按钮圆圈的背景色（React+Electron场景）

原生<input type="radio">的未选中状态背景色无法直接通过background属性修改，需要通过隐藏原生控件+用label模拟样式的方式实现，以下是React+Electron环境下的具体实现：

实现步骤 #

• 结构层：用<label>包裹原生单选按钮，通过label承载自定义样式
• 样式层：隐藏原生input，给label设置圆圈样式，未选中时背景色设为rgba(255,252,229,1)，选中时调整样式区分状态

代码示例 #

React组件代码 #

import React, { useState } from 'react';
import './CustomRadio.css';

const CustomRadioGroup = () => {
  const [selectedValue, setSelectedValue] = useState('option1');

  const handleChange = (e) => {
    setSelectedValue(e.target.value);
  };

  return (
    <div className="radio-group">
      <label className="custom-radio">
        <input
          type="radio"
          value="option1"
          checked={selectedValue === 'option1'}
          onChange={handleChange}
        />
        <span className="radio-circle"></span>
        选项1
      </label>
      <label className="custom-radio">
        <input
          type="radio"
          value="option2"
          checked={selectedValue === 'option2'}
          onChange={handleChange}
        />
        <span className="radio-circle"></span>
        选项2
      </label>
    </div>
  );
};

export default CustomRadioGroup;

CSS样式文件（CustomRadio.css） #

/* 隐藏原生单选按钮 */
.custom-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 自定义圆圈容器 */
.custom-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-right: 20px;
  position: relative;
}

/* 未选中状态的圆圈样式 */
.radio-circle {
  width: 18px;
  height: 18px;
  border: 2px solid #ccc; /* 边框颜色可按需调整 */
  border-radius: 50%;
  background-color: rgba(255,252,229,1);
  margin-right: 8px;
  position: relative;
}

/* 选中状态的圆圈样式 */
.custom-radio input[type="radio"]:checked + .radio-circle {
  border-color: #2196F3; /* 选中时边框颜色，可替换为你的主题色 */
}

/* 选中状态的内部圆点 */
.custom-radio input[type="radio"]:checked + .radio-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #2196F3; /* 选中时内部圆点颜色，可替换为你的主题色 */
}

说明 #

• 这种方式完全自定义了单选按钮外观，不受原生控件样式限制，能精准匹配原型图需求
• Electron基于Chromium内核，上述CSS特性（伪元素、选择器）均完全支持
• 可根据需求调整边框颜色、选中状态的圆点颜色等细节，保持和原型图一致

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