如何通过 CSS 更改单选按钮的“圆圈”的背景颜色？

Question

我正在使用反应开发电子应用程序，我必须按照下面的原型图像实现单选按钮。 如您所见，我想通过 CSS 更改单选按钮“圆圈”的背景颜色（颜色代码为 rgba(255,252,229,1)）。我用谷歌搜索了这个，但是，我找不到答案......

类似的问题是在单选按钮中更改边框和“选中”圆圈。

• Change the circle color of radio button
• Change Background-Color of a Radio Button

我尝试了以下代码，但背景没有改变...... （注意：我想实现的颜色代码是rgba（255,252,229,1），但不清楚。所以，在这道题中，我想实现的颜色是“绿色”。）

• background和background-color

.radio-button-input[type=radio]{
    width: 33px;
    height: 33px;

    background-color: green;
}

==> 没有改变。

• accent-color

.radio-button-input[type=radio]{
    width: 33px;
    height: 33px;

    accent-color: green;
}

===>“选中”圆圈，而不是背景圆圈，已更改

Answer 1

使用 css accent-color

input {
  accent-color: auto;
  display: block;
  width: 33px;
  height: 33px;
}

input.custom {
  accent-color: green;
}

<label> My Custom radio
<input type="radio" class="custom" />
</label>