如何通过CSS修改选中状态下单选按钮（Radio Button）中心圆圈颜色

嘿，我明白你想调整选中状态下单选按钮中心圆圈的颜色，这在Bootstrap表单组件里确实需要一点小技巧——毕竟原生单选按钮的默认样式不太好直接修改。下面给你两种实用的解决方法：

方法一：覆盖Bootstrap默认背景图（推荐） #

Bootstrap的单选按钮选中时，中心圆圈是通过background-image引用的SVG实现的，我们可以直接替换这个SVG的颜色值来调整效果。比如把圆圈改成白色、按钮背景换成红色：

/* 选中状态的单选按钮样式 */
.form-check-input:checked {
  /* 可选：修改按钮整体的背景色和边框色 */
  background-color: #dc3545;
  border-color: #dc3545;
  /* 替换SVG里圆圈的颜色，%23是#的URL编码，这里设置为白色 */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

你只需要把fill='%23fff'里的%23fff换成目标颜色的URL编码即可，比如%23ff0000就是红色，%2300ff00是绿色。

方法二：自定义伪元素模拟按钮样式 #

如果觉得SVG的方式不够灵活，也可以隐藏原生单选按钮，用标签的伪元素完全自定义按钮和圆圈样式：

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

/* 未选中状态的按钮外观 */
.form-check-label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #adb5bd;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* 选中状态的按钮背景 */
.form-check-input:checked + .form-check-label::before {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* 选中状态的中心圆圈 */
.form-check-input:checked + .form-check-label::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff; /* 这里设置中心圆圈的颜色 */
  position: absolute;
  margin-left: -15px;
  margin-top: 4px;
}

这种方法自由度极高，你可以随意调整按钮大小、边框粗细、圆圈尺寸等细节。

小提示 #

• 确保你的自定义CSS代码在Bootstrap的CSS之后引入，这样才能顺利覆盖默认样式。
• 如果你的项目用了Bootstrap SCSS，也可以直接修改$form-check-input-checked-bg等内置变量，更符合Bootstrap的定制逻辑。

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