如何修改Bootstrap 4单选按钮的背景色与填充色？

没问题！要调整Bootstrap单选按钮的背景色和填充（按钮尺寸内边距），我们需要通过自定义CSS覆盖它的默认样式——毕竟原生表单控件的样式比较特殊，得针对不同状态（未选中、选中、hover、focus）分别调整。结合你的示例代码，完整实现方案如下：

完整示例代码 #

HTML（保留你的结构，无需改动） #

<div class="form-check">
  <input class="form-check-input" type="radio" name="radio" id="radio1" value="option1">
  <label class="form-check-label" for="radio1"> radio label </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="radio" id="radio2" value="option2">
  <label class="form-check-label" for="radio2"> another radio label </label>
</div>

自定义CSS #

/* 未选中状态的单选按钮：修改背景色和填充（内边距） */
.form-check-input {
  --bs-form-check-bg: #e0f7fa; /* 自定义未选中时的背景色 */
  padding: 0.4em; /* 调整内边距来改变按钮的大小（填充感） */
  border-color: #b2ebf2; /* 可选：修改未选中时的边框颜色 */
}

/* 选中状态的单选按钮：修改背景色和边框色 */
.form-check-input:checked {
  --bs-form-check-bg: #26a69a; /* 选中时的背景色 */
  --bs-form-check-border-color: #26a69a; /* 选中时的边框色，和背景色保持一致更协调 */
}

/* Hover状态：鼠标悬停时的背景色 */
.form-check-input:hover {
  --bs-form-check-bg: #b2ebf2;
}

/* Focus状态：获得焦点时的阴影（和选中色匹配，保持视觉统一） */
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(38, 166, 154, 0.25);
}

关键说明 #

• 使用Bootstrap CSS变量：Bootstrap通过--bs-form-check-bg这类变量统一管理表单控件的样式，直接修改变量比硬写background-color更贴合框架设计，也能避免样式冲突。
• 加载顺序：确保你的自定义CSS文件放在Bootstrap的CSS文件之后加载，这样自定义样式的优先级才会高于默认样式，不需要额外加!important。
• 填充调整：padding属性直接控制单选按钮的内部间距，值越大按钮看起来越“饱满”，你可以根据需求调整数值。

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