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

Question

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

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

• 更改单选按钮的圆圈颜色
• 更改单选按钮的背景颜色

我尝试了下面的代码，但背景没有改变...（注意：我想实现的颜色代码是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

使用 CSSaccent-color属性，您只能更改单选按钮的颜色。根据您的要求，您可能需要重新设置单选按钮的样式，这可以使用appearance: none属性来完成。

通过使用appearance: none，我们可以从单选按钮中删除所有浏览器样式。现在，我们可以使用其他 CSS 属性（例如背景、边框等）来创建我们自己的自定义单选按钮。:checked CSS 选择器可用于将单选按钮设置为“选中”状态。

浏览器兼容性：所有浏览器都支持

.input-group label{
  font-size: 2.8rem;  
}

input[type=radio]{
  appearance: none;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background-clip: content-box;
  border: 2px solid rgba(255,252,229,1);
  background-color: rgba(255,252,229,1);
}

input[type="radio"]:checked {
  background-color: #000;
  padding: 4px;
  border: 2px solid #000;
}

<div class="input-group">
  <label><input name="gender" type="radio" checked />Male</label>
</div>
<div class="input-group">
  <label><input name="gender" type="radio" />Female</label>
</div>